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

作者: A_si | 来源:发表于2019-07-18 23:56 被阅读0次

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

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

输入命令 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

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

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

这里使用上下箭头选择你需要的插件，然后按下空格选中。这里按需选择安装Babel、Router、CSS Pre-processors、Linter / Formatter，然后敲回车进入下一个页面。
```
? Use history mode for router? (Requires proper server setup for index fallback in production) N
```

输入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

选择less处理编译css文件，回车。

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

选择标准格式，回车。

? 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 files
  In package.json

Babel, PostCSS, ESLint, etc. 配置信息的位置，第一项是单独的创建，第二项是放在 package.json 里。为了方便维护选择第一项。
```
Save this as a preset for future projects? (y/N)
```
保存为预设，以后方便使用。这里选择N。

然后回车，创建项目。

⚓  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>