# 单文件组件-->一个文件,以 xx.vue 命名，就是一个组件
# vue-cli创建项目，webpack构建---》nodejs环境
    -nodejs是一门后端语言--》javascript解释型语言，只能运行在解释器中---》浏览器中集成了js的解释器---》javascript只能运行在浏览器中---》谷歌浏览器的v8引擎---》运行在操作系统之上---》os，网络通信的模块，文件处理---》nodejs的解释器
  -http://nodejs.cn/---》一路下一步---》cmd命令窗口下---》node命令(python)，npm命令(pip)
  -以往版本：https://nodejs.org/zh-cn/download/releases/
    
# 在nodejs的环境上装vue-cli：vue脚手架
    -npm install -g cnpm --registry=https://registry.npm.taobao.org
  -以后使用cnpm替换掉npm即可：下载速度快
    -cnpm install -g @vue/cli  # 速度慢，淘宝写了工具 cnpm，完全替换npm的功能，使用cnpm回去淘宝镜像站下载，速度快
 
# 创建项目---》git上拉取
    -方式一：命令行方式
        -vue create myfirstvue
  -方式二：图形化界面
      -vue ui   # 会启动一个服务，用浏览器访问创建vue项目

#  运行项目方式一
    在项目路径下:npm run serve
    
# 使用pycharm运行
    -点击绿色箭头运行
# 目录介绍
    -myfirstvue   # 项目名字
      -node_modules  # 放着当前项目所有的依赖，可以删除，删除项目运行不了了,npm install 把该项目的依赖再装上，把项目发给别人，提交到git上，文件夹要删掉
    -public   # 文件夹
        -favicon.icon  # 小图标
      -index.html   # 单页面开发，整个项目就这一个页面，以后不要动
    -src     # 以后咱们都是在这里面写东西
        -assets  # 放静态资源，图片，js，css
      -components  # 组件，xx.vue组件，小组件，给页面组件用
          -HelloWorld  # 提供的默认组件，示例
      -router     # vue-router就会有这个文件夹
          -index.js   # vue-router的js代码
      -store      # vuex 就会有这个文件夹
          -index.js   # vuex 的js代码
      -views     # 组件，页面组件
          -About
        -Home   # 默认提供了示例组件
      -App.vue   # 根组件
      -main.js   # 项目的入口于
     -.gitignore   # git的忽略文件
   -babel.config.js  # babel配置
   -package.json  # 项目的所有依赖，类似于  requirements.txt,不要删，npm install根据这个文件下载第三方模块
  -vue.config.js  # vue的配置
   
      
          
      

# js 模块化开发--》模块，包的概念
# 写了一个包，在其他js中导入使用


# 导入
# import 起个名字 from '路径'
# import Vue from 'vue' # 起了个名字叫Vue，vue在node_modules中了，直接写名字即可
// 演示代码--》导入使用--》拿到的就是导出的对象
import settings from '../assets/js/settings'
console.log(settings.name)
console.log(settings.printName())
# 导出
# export default 对象

let name = 'lqz'
function printName() {
    console.log(name)
}
// 把对象导出
export default {name:name,printName:printName}


# 包的导出---》文件夹下新建index.js 
# 包导入的时候，导到文件夹这一层即可
import lqz from '../lqz'
console.log(lqz.name)

# 新建一个 xx.vue,内部包含三块
    -<template></template> # 写原来模板字符串``   html内容
  -<script>
    export default {
      data(){retrun {
        name:'lqz'
      }},
      methods:{},
    }
    </script>
 -<style scoped>   # scoped 样式只在当前组件中生效
    </style>
  
# 自定义组件
<template>
    <div>
        <h1>{{name}}</h1>
        <button @click="handleC">点我看美女</button>

    </div>
</template>

<script>
    export default {
        name: "Lqz",
        data(){
            return {
                name:"lqz is nb"
            }
        },
        methods:{
            handleC(){
                alert('美女')
            }
        }
    }
</script>

<style scoped>
h1 {
    background: pink;
    font-size: 60px;
    text-align: center;
}
</style>

# bootstrap---》ui---》后期一般不用bootstap
    -第一步：下载
   -cnpm install bootstrap@3 -S  #  -S表示把当前模块加入到package.json文件中
   -cnpm install jquery

  -第二步在main.js中配置
      // bootstrap的配置
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'
    
  -第三步:vue.config.js中
    const {defineConfig} = require('@vue/cli-service')
    const webpack = require("webpack");
    module.exports = defineConfig({
        transpileDependencies: true,
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery",
                    "window.$": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
        },
    })

# 专门给vue的ui库--》写ui尽量用它

第一步：下载
cnpm install element-ui -S
第二步：main.js 配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

第一步：安装
cnpm install axios -S
第二步：main.js 配置
import axios from 'axios'
Vue.prototype.$axios = axios;

第三步：使用
# 在任意组件中
# this.$axios   就是axios对象
this.$axios.get().then(res=>{})

第三步：如果没有第二步的配置
# 在任意组件中
import axios from 'axios'
axios.get('').then(res=>{})