vue-cli 4.x 创建项目以及快速原型开发

前言：
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

 

一、全局安装 vue-cli

1. 安装脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2. 验证是否安装成本（查看版本号）

vue -V			// 我安装的版本：@vue/cli 4.5.4

二、新建项目

1. 使用命令创建项目

vue create 项目名称

2. 选择项目配置（最后选择手动配置）
注：选择手动配置后，由于选择的项目配置不一样，后续步骤可能存在差异，仅供参考！

3. 选择你想要的配置（如：添加vue-router， 去除Eslint(Linter/Formatter)）

选项	解释
Babel	一种能让浏览器自动识别向后兼容各版本JavaScript的功能（必选）
TypeScript	一种.ts后缀兼容js的语法（一般不选）
Progressive Web App（PWA）Support	渐进式网络应用（不选）
Router	vue的路由管理组件（选）
Vuex	vue的状态仓库管理组件（选）
CSS Pre-processors	CSS预编译（看项目情况选择）
Linter/Formatter	代码检验 格式检查（看项目情况选择）
Unit Testing	单元测试 以开发角度测试代码（不选）
E2E Testing	e2e测试 以用户角度测试代码（不选）

4. 自行选择一个vue版本

5. 选择配置存放文件

6. 是否报错预设为模板（下一次可以直接使用）

7. 创建中

8. 创建完成

三、快速原型开发

前言： 快速原型开发有什么作用？使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速开发，而不必创建一个vue的项目！

1. 安装全局命令 - （cli全局的一个额外扩展）

npm install -g @vue/cli-service-global

2. 使用快速原型开发

进入到项目文件，使用命令vue serve开启一个本地开发服务器，可有两种启动方式：

• vue serve : 启动文件优先级：main.js > index.js > App.vue，依次寻找，如果都不存在，则将报错：
  
• vue serve 文件名称：启动指定的文件，可以为 .js，.vue 文件

3. 打包
命令：vue build ，该命令的使用方式和vue serve一致，但需要注意，打包后可能存在 net::ERR_ABORTED 404 (Not Found)这样的报错。

解决方式：添加vue.config.js配置，内容如下：

module.exports = {
    publicPath: "./"
}

官方文档
 
 
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！