教你快速使用vue脚手架搭建项目

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

以上是官网的介绍

安装

npm install -g @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

PS C:\Users\asi\Desktop> vue --version
3.9.2

---

使用交互式命令行创建一个项目

1. 在 工作目录打开命令行工具

2. 输入命令 vue create 项目名称：

   PS C:\Users\asi\Desktop\workspace> vue create hello-world
   
   
   Vue CLI v3.9.2
   ┌───────────────────────────┐
   │  Update available: 3.9.3  │
   └───────────────────────────┘
   ? Please pick a preset: (Use arrow keys)
   > default (babel, eslint)
     Manually select features
   

3. 使用上箭头选择第二个选项——手动选择特性。

   ? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
   >(*) Babel
    ( ) TypeScript
    ( ) Progressive Web App (PWA) Support
    ( ) Router
    ( ) Vuex
    ( ) CSS Pre-processors
    (*) Linter / Formatter
    ( ) Unit Testing
    ( ) E2E Testing
   

4. 这里使用上下箭头选择你需要的插件，然后按下空格选中。这里按需选择安装Babel、Router、CSS Pre-processors、Linter / Formatter，然后敲回车进入下一个页面。

   ? Use history mode for router? (Requires proper server setup for index fallback in production) N
   

5. 输入n，不使用历史模式的路由。

   ? 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. 选择less处理编译css文件，回车。

   ? Pick a linter / formatter config: (Use arrow keys)
     ESLint with error prevention only
     ESLint + Airbnb config
   > ESLint + Standard config
     ESLint + Prettier
   

7. 选择标准格式，回车。

   ? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
   >(*) Lint on save
    ( ) Lint and fix on commit
   

8. 选择第一项，保存的时候检查，回车。

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

9. Babel, PostCSS, ESLint, etc. 配置信息的位置，第一项是单独的创建，第二项是放在 package.json 里。为了方便维护选择第一项。

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

10. 保存为预设，以后方便使用。这里选择N。

11. 然后回车，创建项目。

    ⚓  Running completion hooks...
    
      Generating README.md...
    
      Successfully created project hello-world.
      Get started with the following commands:
    
     $ cd hello-world
     $ npm run serve
    
    PS C:\Users\asi\Desktop\workspace>
    

12. 然后进入 hello-world 目录，运行服务：

     $ cd hello-world
     $ npm run serve
    

---

使用图形化界面创建一个项目

1. 进入工作目录，通过 vue ui 命令以图形化界面创建和管理项目：

   vue ui
   

p1.png

2. 上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

   
   
   1.png

3. 选择创建。
   因为这个目录里已经用命令行创建一个 hello-world 项目了，所以这里会显示出来，继续点击在此创建新项目。

   
   
   2.png

4. 输入项目文件夹名称，这次创建的项目是 vue_demo ，点击下一步。

   
   
   3.png

5. 选择手动配置项目。

   
   
   4.png

6. 依然勾选需要的插件，和最后一项，使用配置文件。下一步。

   
   
   5.png

7. 选择 less 和 ESLint + Standard config 。点击创建项目。

   
   
   6.png

8. 选择创建项目，不保留预设。

   
   
   7.png

9. 项目创建成功。

   
   
   8.png