Vue-cli3 创建项目

检测环境
必须安装有node、且vue-cli版本为3，这里的vue -V是查看vue-cli的版本号，同学们不要搞错了哦！

创建流程

// 创建命令，项目名为test
vue create test

如果你想要创建的文件夹中已经存在与创建的项目项目名称相同的文件夹，即你在D:\dev文件路径执行命令且D:\dev中已经存在test文件夹，则会出现以下选项：

? Target directory D:\dev\test already exists. Pick an action: (Use arrow keys)Overwrite     // 覆盖已经存在的文件夹
> Merge          // 合并文件夹Cancel      // 取消创建

这种情况常见于我们在线上代码库创建了代码仓库并克隆到本地后，我们会想要在仓库一级直接创建项目而不是子目录，这时候我们一般选择 Merge合并 选项，选择确认后会出现以下选项：

? Please pick a preset: (Use arrow keys)default (babel, eslint)      // 默认创建
> Manually select features       // 手动选择创建

选择default之后会直接创建项目，这里我们选择手动创建。
下面我们按需选择，上下方向键移动，空格键选择，一般建议选择如下：

? Please pick a preset: Manually select features
? Check the features needed for your project:(*) Babel      // 转码器，将ES6转为ES5，这里建议选上，兼容低版本浏览器( ) TypeScript     // TS语法，有感兴趣的同学可以尝试一下( ) Progressive Web App (PWA) Support       // 渐进式Web应用程序，不知道能干嘛，求大佬指教(*) Router      // 建议，Vue全家桶的路由vue-router(*) Vuex        // 建议，Vue全家桶的Vuex状态管理
>(*) CSS Pre-processors      // CSS预处理器(*) Linter / Formatter        // 格式验证，看同学们对自己的代码格式规范是否严格，可选( ) Unit Testing     // 单元测试( ) E2E Testing      // E2E测试

选择选项后会询问我们是否使用history模式，history模式是vue-router模式选择mode中的一种，这里详情可以看一下vue-router官方文档，这个选择个人感觉不大重要，后期可以自行设置更改的，更改配置可以参考Vue3项目切换(设置)路由模式，这里我一般选择N(否，不使用)

// 是否选择history模式
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

接下来选择css预处理类型，这里看自己习惯使用什么，我这里选择的Sass/SCSS (with node-sass)，有时候也会使用Less，感觉差别不大，看个人爱好吧，另外两个不是很了解了

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)Sass/SCSS (with dart-sass)  // 这个是新出来的，还不是很清楚
> Sass/SCSS (with node-sass) // node-sass，我选择的是这个Less     // LessStylus

接下来是逃不掉不避开的ESLint检测选择，这个完全看自己了，都不影响的，喜欢挑战或者要求严格的同学可以尝试选择严格模式(真的变态，标点符号、换行这些都要按照标准来)

? Pick a linter / formatter config: (Use arrow keys)ESLint with error prevention only        // 只进行报错提醒ESLint + Airbnb config       // 不严谨模式ESLint + Standard config       // 正常模式
> ESLint + Prettier     // 严格模式// 据说在上面选择了 TypeScript 的同学这里会有个TSLint (deprecated)选项

接下来就是选择什么时候校验了，建议选择保存时检测，毕竟早检测早治疗嘛~~~

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save        // 保存时检测( ) Lint and fix on commit      // 修复和提交时检测

这是在问你要在哪里保存各类配置设置，建议选择第一个在独立的配置文件

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json

最后就是问你是否保存这一次的选项配置了，保存的话下一次创建时就可以选择这次配置快速创建了

? Save this as a preset for future projects? (y/N) N

1.以上是我个人的创建选择，选择单元测试等选项的还有其他选项，有兴趣的同学可以自己试一试；
2.本文主要是记录自己创建流程，如有错误，希望各位大佬不吝指教

Vue-cli3 创建项目相关推荐

【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
[Vue]-Vue脚手架创建项目时的 linter / formatter config配置选择 ESLint with error prevention only 只进行报错提醒 ESLint + ...
Vue脚手架创建项目流程
Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd, 按住shift右键打开黑窗口,或者直接在文件夹上面路径上面输入cmd 输入vue ui 会自己在浏览器打开点击创建项目项目文件 ...
vue脚手架安装以及vue脚手架创建项目（详细步骤）
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目命令行方式创建使用UI界面搭建 idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
Vue初始化创建项目
Vue初始化创建项目 1.创建项目: 2.打开项目: 3.删除项目中的默认添加文件 4.添加自己的东西 4.1.初始化HTML中的代码: 4.2.使用视口缩放+rem的方式适配移动端. 4.3.运行查 ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...
vue vue-cli创建项目步骤方法
1.全局安装vue-cli npm i -global vue-cli 2.创建项目 vue init webpack project // name 为项目名 3.cd到项目的目录下 cd ...
vue 手脚架创建项目
vue2 手脚架创建 npm init : 初始化 npm, 一直回车,会生成一个 package.json文件 vue init webpack vue2_demo2: 创建项目创建成功,项目结 ...
Vue+Cesium创建项目并加载地图全过程
目录一.创建vue项目准备工作 1.执行创建项目命令 2.项目名称 3.项目说明 4.作者描述 5. 编译方式 6.是否安装vue路由 7.是否使用ESLine 8.选择预设的ESLine规则 9. ...
vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）
文章目录前言创建vite项目 vite.config.ts配置自动化引入组件配置以及.env配置的引用创建src/vite-env.d.ts main.ts配置 api/request.ts ...
Vue cli创建项目时键盘操作无效（箭头移动失效、交互提示符失效）
用 git bash 使用 vue create demo 创建新项目时,键盘方向键失效,无法选中对应的选项(交互提示符不工作),问题状态如下图所示.文中给出四种解决方案,供各位参考. 方案一使用电 ...

Vue-cli3 创建项目

Vue-cli3 创建项目相关推荐

最新文章

热门文章