vue-cli
1. 什么是vue-cli
vue-cli官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架)，用于快速生成一个vue 的项目模板
2. 主要功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包测试
3. 环境准备
-
Node.js
-
git
4. 安装vue-cli
- 安装Node.js
官网下载地址：https://nodejs.org/zh-cn/
如果你已经全局安装了旧版本的vue-cli(3.0以下)，你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它
安装vue-cli3.0 npm install -g @vue/cli 或者 yarn global add @vue/cli
版本是否是3.x vue --version/vue -V
这里注意下，vue build版本一般是默认的，直接enter，然后什么单元测试，eslint检查，统统直接不要，只要一个vue-router路由。
5. 创建项目：
vue init webpack firstapp
输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了firstapp
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
**Setup e2e tests with Nightwatch?**是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n
运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了，等待一会，就会显示创建项目创建成功
打开文件夹：
介绍一下目录及其作用：
build：最终发布的代码的存放位置。
config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。
node_modules：npm 加载的项目所需要的各种依赖模块。
src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：
assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等
components:目录里放的是一个个的组件文件
router/index.js：配置路由的地方
App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是 将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。
main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。
static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。
test：初始测试目录，可删除
.XXXX文件：配置文件。
index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。
package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）
package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）
README.md：项目的说明文件。
webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。
.babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制
.gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）
.postcssrc.js:前缀的配置 （css转化的配置）
.editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格...（建议定义这个规范）
.eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）
.eslintignore:忽略eslint对项目某些文件的语法规则的检查
这就是整个项目的目录结构，其中，我们主要在src目录中做修改（模块化开发）。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装。
安装项目所需要的依赖包/插件（在package.json可查看）：执行 cnpm install (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目
安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。
安装完依赖包资源后，我们就可以运行整个项目了。
6. 运行项目
在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
项目启动后，在浏览器中输入项目启动后的地址：
在浏览器中会出现vue的logo：
项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。
在浏览器中会出现vue的logo：
[外链图片转存中…(img-bSh44Mc1-1626435064614)]
项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。