【VUE2.0】4、VUE-CLI的安装、项目创建、运行原理

单页面应用程序

        介绍：Single Page Application，简称SPA。一个web网站中只有一个HTML页面，所有的功能和交互都在这一个页面中完成

VUE-CLI

        介绍：vue-cli是vue.js开发的标准工具，它简化了程序员基于webpack创建工程化的vue项目的过程

VUE-CLI安装

        cnpm i -g @vue/cli 

VUE-CLI的使用

       1 vue create 项目名，选择手动配置

        

        2初学者建议以下选项

         

        3选择vue2

        

         4选择less

        

         5选择独立配置文件，而不是在合并到package,json中

        

         6是否保存当前配置为预设

        

        7如果选yes，则需要为该预设配置命名

        8配置成功，cd test快速进入test目录；npm run serve快速运行项目

        

  

 VUE-CLI生成项目的目录结构

        public目录下的index.html为该项目唯一的单页面html页面

        vue项目中src目录的构成：

                assets文件夹：存放项目中用到的静态资源文件，例如：css样式表，图片资源

                components文件夹：程序员封装的可复用的组件，都要放到components目录下

                main.js是项目的入口文件。整个项目的运行，要先执行main.js。webpack打包入口文件（相当于entry节点的作用）

                App.vue是项目的根组件

VUE项目的运行过程

        在工程化的项目中，vue通过main.js把App.vue渲染到index.html的指定区域中

        main.js文件内容：

//导入vue这个包，得到Vue构造函数
import Vue from 'vue'
//导入App.vue根组件，将来要把App.vue中的模板结构，渲染到HTML页面中
import App from './App.vue'

Vue.config.productionTip = false

//创建Vue实例对象
new Vue({
	//把render函数指定的组件，渲染到HTML页面中（public下的index.html中）
	render: h => h(App),
}).$mount('#app')


//以上也可以写成
new Vue({
    el:'#app'
	render: h => h(App),
})