全局安装脚手架及第一次配置项目详解

全局安装脚手架（vue-cli)

命令：
npm install @vue/cli -g
vue -V 可以查看vue-cli的版本
npm root view -g 查看安装根目录

创建项目

.命令:
vue create Project_01 项目名字 创建项目

一 手动安装

1、选择预设

Please pick a preset: (Use arrow keys) 使用键盘上下键选择 回车确定
default (babel, eslint) 默认只安装babel和eslint（选择版本）
Manually select features 手动选择

Vue CLI v4.5.13
? Please pick a preset:
  my_proset_01 ([Vue 2] babel, router, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features ←选择这个

————————————————

2、手动选择插件(大空格)

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Check the features needed for your project: 空格选择，a全选，i反选 回车确定
choose vue version：选择vue版本
Babel ：将高级版本ES转换为浏览器识别的JS语法，ES6->ES5
TypeScript： JS的超集，提供了JS面向对象支持
Progressive Web App (PWA) Support PWA Support:使应用向原生APP
Router :路由、请求所对应的地址
Vuex: 数据状态管理器、用于多页面传参
CSS Pre-processors: CSS预处理，将高级CSS语法转换为浏览器识别CSS语法
Linter / Formatter :代码检查工具,语法检测，严格，项目开发推荐
Unit Testing :单元测试
E2E Testing :端端测试
————————————————

3、选择你目前vue在使用的版本

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x    这是2的X 目前常用
  3.x

————————————————

4、选择N 不是历史模式 是哈希模式

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

————————————————

5、选择是sass还是less 根据业务需求来 看你用说明选less

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? 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

————————————————

6、选择标准 ESLint + Standard config

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier

————————————————

7、检测语法是否规范 不规范则报错

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

————————————————

8、是否单独形成一个配置文件,一般习惯选中第一个

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

————————————————

9、是否将以上选择保存起来变成一个预设模板??

Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) 初学者选N 多学几遍

此时项目已经在初始化了

直到看到这个选项

🎉  Successfully created project project_01.
👉  Get started with the following commands:

 $ cd project_01
 $ npm run serve

输入以上两行命令
cd project_01
pm run serve
它让你干什么你就干什么

##完成

 DONE  Compiled successfully in 3561ms                                                                      
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.69.35:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.


复制链接去看看吧