手摸手学前端：vue-cli4图形化方式创建一个Vue种子项目

前言

cli版本号：@vue/cli 4.2.3

JavaScript的强大不必多言。做为一名后端开发工程师，不会前端是不行的，这年头走哪都讲究个全栈么。Angular、React、Vue等js库的出现，彻底颠覆了后端开发对前端的认识。本人最近自学了一些Vue的皮毛，写下这篇博客不是为了哗众取宠，权当是为自己做一个Vue学习笔记。

一、安装或升级vue-cli版本

1. Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

2. Node 版本要求

   Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

3. 可以使用下列任一命令安装这个新的Vue CLI包：

   npm install -g @vue/cli
   # OR
   yarn global add @vue/cli
   

4. 查看版本 vue --version或者vue -V：

   

二、用vue-cli4图形化方式创建vue项目

1. 在命令行工具（推荐Cmder，Windows平台最好用的）中输入命令：vue ui：

vue-cli会自动打开浏览器跳转到Vue项目管理器页面。

2. 点击创建项目，选择目录，包管理器我选择的npm，点击下一步。

   

3. 预设这里我选择的手动模式，来手动配置项目，点击下一步。

   

4. 功能界面选择自己需要的功能，我这里选择了Babel，Router，Vuex等等，点击下一步。

   

5. 配置界面，选择ESLint配置模版，这里我习惯用ESLint+Standard config，点击创建项目。

   

6. 点击创建项目后，页面会显示正在创建项目，切换到命令行工具后可以看到正在下载依赖等。

   

7. 将创建完的项目导入编辑器中，执行npm server启动，打开浏览器输入地址即可看到vue页面。

   

   

以上。