2-08-vue-cli

一、什么是单页面应用程序

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

二、什么是vue-cli

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

引用自vue-cli官网上的一句话：

程序员可以专注在撰写的应用上，而不必花几天去纠结webpack配置的问题。

中文官网：https://cli.vuejs.org/zh/

三、安装和使用

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

npm install -g @vue/cli

基于vue-cli快速生成工程化的Vue项目：

vue create 项目的名称

四、创建项目

第一步，设置预设

可以选Vue2、Vue3以及手动配置功能

如果选了前两个，会自动根据对应版本创建项目。

如果选了第三个，则会进入手动配置选项

第二步，手动配置：

其中：

• “Choose Vue version”会开启选择vue 版本的选项，必须开启

• “Babel”用于生成兼容性JS代码，必须开启

• “TypeScript”是JS强化性语言，项目要TS语言才需要开启

• “Progressive Web App（PWA） Support”是渐进式框架，按需开启

• “Router”是路由，按需开启

• “Vuex”未知

• “CSS Pre-processors”CSS的预处理器，常用的有Less和Sass

• “Linter / Formatter”用于约束代码风格，团队开发的时候会用到

• “Unit Testing”用于单元测试

• “E2E Testing”用于单元测试

第三步，选择Vue版本

第四步，选择CSS预处理器

第五步，配置文件

• “In dedicated config files”单独创建Babel、ESLint的配置文件

• “In package.json”全部包含在package.json里面

建议分开

第六步，存预设

之前的设置都保存起来，以供以后项目使用

第七部，启动项目

npm run dev

五、src目录的结构

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

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

• main.js是项目的入口文件。整个项目运行，要先执行main.js

• App.vue是项目的根组件

六、vue项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html指定区域内。

main.js的结构：

其中：

• App.vue用来编写待渲染的模版结构

• index.html中需要预留一个el区域

• main.js把App.vue渲染到了index.html所预留的区域中

$mount(‘#app’)的作用跟el:’#app’的作用是一样