vuecli (vue的基本脚手架安装过程)

vuecli

这是vue的脚手架，可以帮助我们快速搭建项目框架， 目前使用的最新版的脚手架 @vue/cli, 如果是 低版本的则为 vue-cli

安装

npm i @vue/cli -g

测试安装是否成功：

vue -V

创建项目

安装成功后，可以通过vue 命令搭建你的项目

vue create 项目名

搭建过程

1. 在命令行窗口输入 vue create myapp; 选择 最后一项 Manually select features

? Please pick a preset: (Use arrow keys)
> first ([Vue 2] babel, router, vuex)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

2. 选择需要安装的功能（依赖/包）:最基础的两个选项是第一个和第二个； 后期可以根据项目需求，安装 Router 和 Vuex; 以及其他的包

? Check the features needed for your project: (Press <space> to select, <a> to
// 这是最基础的项目框架
toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

3. 选择vue的版本号： 选择的是 2.x 版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

4. 项目相关的一些配置文件存放的目录：默认选择第一个In dedicated config files ： 放到独立的文件中进行存储

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

5. 是否保存为预设： 就是保留历史即使，以便下次直接使用; 可以根据自己需求来定; y:保留预设； n: 不保留

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

如果选择保留预设，则会提示输入预设的名字：名字是自定义的，英文格式

? Save preset as:

6. 开始安装

7. 安装成功后，可以运行项目

 $ cd myapp  // 进入项目文件夹
 $ yarn serve  // 启动项目

8. 可以访问

9. 把里边的内容清空，保留一个干净的项目框架， 后期可以直接使用， 直接npm i

后期如果选择了其他的包， 还会有对应的配置项，比如 VueRouter 的 是否使用历史记录模式等相关配置

后期需要安装路由

在命令行输入命令 安装到依赖

npm i vue-router -seave