什么是脚手架工具?
其实就是用来快速搭建项目的工具。
使用@vue/cli
- 全局安装@vue/cli
npm install @vue/cli -g
- 全局安装完成之后,提供了一个 vue 的命令。使用 vue -V 来查看一下脚手架版本
- 在要创建项目的文件夹下使用 vue 命令创建一个项目,并选择配置。(注意,不要使用 git bash 来操作,git bash 不能上下键)
vue create 项目名字
配置:可以通过上下键来控制,选择自己需要的。
脚手架创建的项目的基本文件介绍(默认配置)
-
node_modules
项目依赖包 -
public
静态资源文件夹。(这里存放的是不需要被构建工具处理的)- favicon.ico
当前项目的浏览器的小图标 - index.html
整个项目的入口页面,这个文件中只提供了一个挂载点元素,js内容都是构建工具去处理的
- favicon.ico
-
src
项目的源代码文件夹 (放在这个文件夹中的内容我们认为都是需要被构建工具处理的文件)- components
存放公用的vue组件的文件夹 - assets
静态资源文件。(需要被构建工具处理的) - App.vue
项目的万年老二组件 - main.js
整个项目的入口js文件 。构建工具打包生成js文件的起点就是它。
- components
-
.gitignore
git 的忽略文件的设置文件。脚手架创建的项目,默认做了git初始化 -
babel.config.js
babel相关的配置文件。(转换es6、es7、es8等高级语法到es5的一个工具) -
package-lock.json
依赖锁文件 -
package.json
项目描述文件,里面有依赖项的配置 -
READMD.md
读我。接手一个项目,第一件事情,就是看 README.md