基于vuecli3创建vue项目

一. 卸载旧版本,安装新版本,检测安装是否正常

 注: 以下所有操作在 cmd 命令行中完成

卸载

// Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 
// 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过
 npm uninstall vue-cli -g 
或 
 yarn global remove vue-cli 
// 卸载它。

安装

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

检测

// 你还可以用这个命令来检查其版本是否正确 (3.x)
vue --version

二. 创建VUE项目

 运行 vue create 命令

// 例如你的第一个 vue-cli 3 的项目叫 vue-cli3-demo
// 所以在创建项目时可以输入以下命

vue create vue-cli3-demo

// 输入命令后回车,需要等待一会

你会被提示选取一个 preset(预置选项)。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset(预置选项)，也可以选“手动选择特性”来选取需要的特性。

? Please pick a preset: (Use arrow keys) // 请选择预置 (使用上下箭头)
> default (babel, eslint) // 默认选项(基本的 Babel + ESLint 设置)
  Manually select features // 手动选择 需要的配置

移动箭头选择第二项(Manually select features[手动选择功能]), 你会看到如下选项

Vue CLI v3.7.0

 //请选择预置:手动选择功能
? Please pick a preset: Manually select features

// 检查项目所需的特性
? Check the features needed for your project: 

//空格键选择, 字母a键切换所有, 字母i键反向选择
(Press <space> to select, <a> to toggle all, <i> to invert selection)
 
>(*) Babel // 是一个 JavaScript 编译器
 ( ) TypeScript // 编译JavaScript
 ( ) Progressive Web App (PWA) Support // 渐进式WEB应用
 ( ) Router // vue 路由
 ( ) Vuex // vue 状态管理
 ( ) CSS Pre-processors // css 预处理器 Sass/SCSS/less 编译我们的 <style> 标签
 (*) Linter / Formatter // textlint输出格式化程序
 ( ) Unit Testing // 单元测试
 ( ) E2E Testing // e2e 测试

根据自己需要选择 最基本保证项目能跑 选择 babel,router,vuex就可以了

我选择 Babel, Router, Vuex, CSS Pre-processors, Linter, Unit 这些

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit

// 路由使用历史模式 true 或 false 我选择 true
? Use history mode for router? (Requires proper server setup for index fallback in production) 

接着往下看

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

// 下面的 的选项就是在问 要使用哪个css与编辑器 使用箭头选择 我选第二个
? 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)
  Less
  Stylus

我选择了sass/scss(withnode-sass)

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)

// eslint 配置 选择最后一个
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier

// 选择 额外的lint 功能
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存
 ( ) Lint and fix on commit

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save

// 选择一个单元测试解决方案:(使用箭头键) 我选第一个
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha

// 你想让postcss和eslint配置在哪里 package.json 或者 专有的配置文件中(etc.)
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

Vue CLI v3.7.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

// 将其保存为将来项目的预置 (我选No)
? Save this as a preset for future projects? (y/N)

以上操作完成会自动下载创建项目