Vue2.0教程（五） vue-cli 学习

1.单页面应用程序

1.1 什么是单页面应用程序

单页面应用程序(英文名:Single Page Application) 简称SPA，顾名思义，指的是一个web网站中只有唯一的一个HTML页面，所有的功能与交互都在这个唯一的页面内完成。

2. 什么是vue-cli

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

程序员可以专注于撰写应用上，而不必花好几天去纠结webpack配置问题。
中文官网：https://cli.vuejs.org/zh/

2.1 安装和使用cli

vue-cli 是npm 上的一个全局包，使用npm install 命令，即可方便的把它安装到自己的电脑上：
npm install -g @vue/cli

基于vue-cli快速生成工程化的Vue项目:
vue create 项目的名称
下载完成后，使用 vue -V 可以查看vue-cli版本

2.2 cli创建项目 实例

vue create first
之后需要选择一些配置
1）第一个选项面板

• 一般选择第三项，Manually select features 手动选择配置
  2）之后是第二个选项面板
  上下箭头移动 空格选中，带*是选中
• Babel一定要装，处理js高级语法的模块，ts先不用装，progressive web app也不装，router 和 vuex也不装
• css pre-processors css预处理器装一下
• Linter先不装（严格模式）约束代码风格
• 其他的测试也不装
  3）第三个页面
  选择vue版本 ，这里选择2.x
  4）第四个页面
  选择Less
  5)第五个页面
  选择第一项，dedicated config files，单独的配置单独放出来
  6)第六个页面
  预设，把之前的配置存起来 按y ，否则按n

完成之后，进入终端 npm run server 就能启动项目。

2.3 介绍项目的目录结构

node_modules 下载的所有包
src 项目源代码目录
public 放了一个图标和唯一首页
babel.config.js babel配置文件
.gitignore git忽略文件
package.json

2.3.1 src目录

assets 存放项目中用到的静态资源文件（图片，样式表…)
components 程序员封装的可复用组件放在这里
main.js 是项目的入口文件，整个项目的执行要先执行main.js
App.vue 是项目的根组件

2.4 vue项目的运行流程

在工程化项目中，vue要做的事情很单纯：通过main.js把App.vue 渲染到index.html的指定区域中。
其中：
1）App.vue 用来编写待渲染的模板结构
2）index.html 中需要预留一个el区域
3）main.js 把App.vue渲染到了index.html所预留的区域中
我们来观察main.js文件

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

Vue.config.productionTip = false

//创建vue的实例对象
new Vue({
  // el:"#app",  //.$mount('#app')作用和el完全一样
  //把render函数指定的组件，渲染到HTML页面中，el指定的ui结构会替换render指定的结构
    render: h => h(App),
}).$mount('#app')

vue 实例的$mount方法作用和el一样。