Vue脚手架使用

vue的全家桶：
vue.js
vue-router.js
vue-cli (脚手架，快速搭建vue项目)
axios
vuex.js

    vue-cli的安装和使用
        安装： npm i @vue/cli -g
        或者：  npm i "@vue/cli" -g
    
    检测是否安装vue-cli
        vue -V (注意是大V)

        显示脚手架vue-cli的版本 @vue/cli 4.5.11

    创建项目
        vue create myapp (myapp为自定义项目名)

        选择default(Babel,Eslint)

        Babel: 是一个把ES6+语法转译为低版本浏览器所支持的ES语法的编译工具
        ESlint: 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码
    
    启动项目：
        1. 进入目录
        2. npm run serve
        3. 在浏览器输入： http://localhost:8000


    项目结构 ：
        1. README.md    
        2.  package.json:   (1)有scripts脚本  npm run serve   (2)项目所需的依赖
        3. package-lock.json:   锁定依赖的版本
        4. babel.config.js 了解，是babel在转换es6+代码时的配置
        5. .gitignore: git的忽略文件，指定的文件和目录不会提交到git仓库
        6. node_modules: nodejs的包文件
        7. public
                 (1)favicon.ico : 网站缩略图
                 (2)index.html:  项目中唯一的一个网页，内部有一个#app的div


        8. src: 最重要的文件夹，存储项目的源代码

            (1) main.js : 是整个项目的入口文件

            (2) App.vue:  它是一个vue的单文件组件(只要有.vue文件，即为一个独立的组件，组件中有三个标签： template,script,style)


    入口文件main.js

            (1) import Vue from 'vue'
                等同于引入vue.js  <script src="./js/vue.js"></script>

            (2)import App from './App.vue'
                引入根组件App
                App是单页面应用中的唯一的根组件,以后开发的组件都会放在App内部
        

            (3) Vue.config.productionTip = false
                隐藏开发模式的提示：

            (4) 创建vue的根实例

                // h是一个渲染dom的回调,将App组件渲染到id=app的dom结构中
                // $mount('#app'):   #app即为public文件夹中index.html中的<div id="app"></div>

                new Vue({
                    render: h => h(App),
                }).$mount('#app')