2020-10-06

Vue-cli的完整搭建

1：安装方法

全局安装vue-cli: 
cnpm install -g @vue/cli
or
yarn global add @vue/cli
检测安装：
vue  -V   

【注意】 要求node.js版本是8+

如果是通过npm 或者  cnpm 安装的话，node-sass可能会存在安装不上的问题，
是需需要在单独进行安装一遍的
cnpm i  node-sass 

2：检查cli

下载完 vue-cli之后   检测下cli的版本
然后通过  Vue create .  进入一个界面

3：在 vue create . 中需要选择的步骤

第一步：Generate project in current directory?（询问是否在当前项目中生成  Y）

第二步：
    Vue CLI v4.5.6
    ? Please pick a preset:
      test ([Vue 2] node-sass, babel, eslint)
      Default ([Vue 2] babel, eslint)
      Default (Vue 3 Preview) ([Vue 3] babel, eslint)
    > Manually select features（选这项）

第三步： 
    Vue CLI v4.5.6
    ? 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

第四步：
    Vue CLI v4.5.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
    > 2.x    （选这个）
      3.x (Preview)

第五步：
    Vue CLI v4.5.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 2.x
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
      Sass/SCSS (with dart-sass)
    > Sass/SCSS (with node-sass)  （选这个）
      Less
      Stylus

第六步：
    Vue CLI v4.5.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 2.x
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
    ? Pick a linter / formatter config:
      ESLint with error prevention only
      ESLint + Airbnb config
    > ESLint + Standard config （选这个，标准版本的配置）
      ESLint + Prettier

第七步：
    Vue CLI v4.5.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 2.x
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features:
     (*) Lint on save              （选这项）
    >(*) Lint and fix on commit    （选这项）

第八步：
    Vue CLI v4.5.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 2.x
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features: Lint on save, Lint and fix on commit
    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    > In dedicated config files  （选这项   生成其他的配置文件）
      In package.json 

第九步：
    Vue CLI v4.5.6
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 2.x
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features: Lint on save, Lint and fix on commit
    ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
    ? Save this as a preset for future projects? (y/N) y  （选这项，是否保存预设  y）

第十步：
    以上步骤选择完毕之后，会自动进行下一步的下载
    $ npm run serve 看见这个标识之后。
    下一步  直接运行 npm run serve  就可以 

4：下载完成之后

运行完 npm run serve 之后，若出现这个标识，就代表创建成功了。
     DONE  Compiled successfully in 6795ms                                                                                              5:08:52 ├F10: PM
    ┤
      App running at:
      - Local:   http://localhost:8080/   （可以点击Ctrl点击这个网址）
      - Network: http://10.30.164.205:8080/
    
      Note that the development build is not optimized.
      To create a production build, run npm run build.

5：搭建完成