1、单页面应用程序
1.1 什么是单页面应用程序
单页面应用程序 (英文名：Single Page Application)，简称 SPA。顾名思义，指的是一个web网站只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。
2. 什么是vue-cli
vue-cli是vue开发的一个标准工具。它简化了程序员基于webpack创建工程化的vue项目的过程。
官网：https://cli.vuejs.org/zh/guide
3.vue-cli的安装和使用
vue-cli是npm的一个全局包，使用npm install命令，即可方便把它安装到自己的电脑上
3.1 安装
npm install -g @vue/cli
3.2 查看 vue-cli的版本
vue --version
或以下
vue -V
3.3 基于vue-cli快速创建工程化的vue项目
vue create 项目名称
- 项目名称不要带中文，也不要带空格
3.4 手动选择安装要选择哪些功能
- 使用方向键上下移动光标，切换到 Manually select features，然后回车
57.png
- "*"代表已经选中 空格可以去选中 选择完自己要安装的，再回车
58.png
- 选择vue的版本,然后再回车
- 2.x 指的是 vue2
- 3.x指的是vue3
59.png
- 是否为路由选择历史模式，这里我们输入Y即可，然后再回车
- Y:是
- n:否
60.png
- 选择css的预处理器,因为css处理器有很多种，选中自己想要的然后回车
61.png
- 选择配置文件的处理，这里我们可以选择 In dedicated config files ，然后再回车
- In dedicated config files ：分别放在各自的配置文件
- In package.json：还是统一安装到package.json文件中
62.png
- 是否将此保存为未来项目的预设？需要保存的可以输入y
63.png
- 把这次预设保存为 ： 这里就是取个名字，输入完后回车即可
64.png
65.png
- 创建成功后
65.png
3.5 介绍项目的目录结构
66.png
- node_modules:第三方包和依赖包都安装在这个目录下
- src:是存放源代码的
- public:因为vue是单页面应用程序，只有一个html，它是放在public目录下的index.html中
- package.json：包管理配置文件
- babel.config.js：babel的配置文件
- .gitignore：配置git忽略的文件
3.6 介绍src目录下的目录结构
67.png
- assets:用于放项目的静态资源、图片
- components:可复用的ui组件结构可以放入到这
- main.js：是项目的入口文件，整个项目的运行，要先运行main.js
- App.vue：是项目的根组件
3.7 了解vue项目的运行过程
在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中。
68.png
3.8 main.js的一个注意事项
- render函数指定的组件替换$mount指定的dom元素
new Vue({
render: h => h(App) //把render函数指定的组件渲染到index.html的指定位置
}).$mount('#app')
等价下面
- render函数会替换掉指定的el元素指定的dom元素
new Vue({
el:"#app",
render: h => h(App) //把render函数指定的组件渲染到index.html的指定位置
})
4. 总结
vue-cli.png
