vue-cli vue 创建项目

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