前言:
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: "./"
}
官方文档
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!