vue开发使用vue-cli4.x创建项目详解
- 前言vue-cli4.x新版本安装教程可以看看我之前的文章。版本更新后在创建项目上有所不同，这里做详细的步骤教程以及选项解释。- 创建项目vue create 项目名- 选择配置先无视第一项（我的个人配置，后面会讲到）；一般有两项：default：默认配置（只有babel和eslint）Manually select features：手动配置一般做项目默认配置是不够的，我...
- 前言
vue-cli4.x新版本安装教程可以看看我之前的文章。版本更新后在创建项目上有所不同，这里做详细的步骤教程以及选项解释。
- 创建项目
vue create 项目名
- 选择配置
先无视第一项（我的个人配置，后面会讲到）；一般有两项：
default：默认配置（只有babel和eslint）
Manually select features：手动配置
一般做项目默认配置是不够的，我们选第二项。
- 进行配置
| 选项 | 解释 |
|---|---|
| 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测试 以用户角度测试代码（不选） |
- 选择router模式
history和hash是router组件的mode选项，一般默认用history更普遍和实用。
- 选择CSS预编译方式
这里看你个人习惯，我经常用Sass/Scss（with node-sass）或者Less
- 选择代码校验方式
我习惯选ESLint with error prevention only或者最后一项ESLint+Prettier。如果是用VScode的小伙伴推荐最后一项，与VScode里的Prettier插件配合不错。
- 选择代码检查时间点
选择第一项Lint on save，在保存后就自动检验代码和格式。
- 询问配置保存位置
询问是否将配置放在package.json文件中。推荐选第一项In dedicated config files，创建新的配置文件。
- 保存为预配置
询问是否将以上配置保存为预配置，也就是刚第一步选择配置时我的“Jsxj-preset”。这个根据自己意愿，预配置对以后创建项目来说还是方便点的，
选择“Y”or“N”。如果“Y”，就继续设置预配置名称；如果“N”就自动跳过。
- 自动创建
回车开始自动创建项目，需要一定时间，创建成功结束后可以看到以下项目结构！
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献4条内容
所有评论(0)