Vue-cli快速入门&集成idea

---

前言

学习完Vue的基本使用之后, 笔者在学习使用Vue-cli搭建项目时遇到了不少问题。特此在这里记录Vue-cli的基本搭建步骤，和一些常见问题的排查。

---

一、Vue-cli是什么？

这里直接给出官网的介绍：https://cli.vuejs.org/zh/guide/

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

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

翻译成人话，Vue-cli这玩意就是一个便于我们快速开发的脚手架，方便我们更加迅速的开发。
这玩意还有一个好处就是提供了统一的目录结构，这点像Maven一样，如果你从网上找到的开源项目是基于Vue-cli的，那你看它的源代码就不会毫无头绪。

二、前置环境

以下所说的cmd命令行，都要使用管理员模式运行

1.安装Node.js

需要安装Node.js，直接从官网下最新版即可。http://nodejs.cn/
安装过程没什么好说的，一路下一步(个人习惯设置一下安装路径。不要在C盘)，傻瓜式安装。
安装完后在cmd中输入下图指令，若看到版本号，则说明安装成功。

2.安装cnpm

安装完成之后，需要安装cnpm，并配置淘宝镜像。根据你的网速决定，有2种安装方式。在命令行输入：
npm install cnpm -g(如果你是国内网，大概率非常卡，而且最后可能会出错。这里和以下的-g 代表全局安装)
npm install cnpm -g --registry=https://registry.npm.taobao.org（安装速度快，但是后续可能出现问题）

由于笔者网络比较慢，这里选用的是第二种安装方式。以后如果出现问题，就更新解决方案。
下文的安装命令，大多数都可以选择npm和cnpm的安装方式！笔者全都选择cnpm，大家可根据实际情况替换成npm

3.安装Vue-cli

在cmd窗口执行：
cnpm install -g vue-cli
安装完后在cmd中输入下图指令，若看到版本号，则说明安装成功。

4.安装webpack打包工具

在cmd窗口执行：
cnpm install webpack -g
cnpm install webpack-cli -g
安装完后在cmd中输入下图指令，若看到版本号，则说明安装成功。

5.在idea内置的命令行中安装其他常用组件

idea工具打开vue项目后，会自带命令行（就在idea工具的下方）。以后安装组件就不用在cmd窗口中安装了，直接在idea中输入命令即可。
在初学阶段需要安装的组件大概有vue-router, axios, vue-axios, element-ui等等(还有其他的组件，用到的时候再补充)，将来要用哪个，安装哪个！ 它们的安装命令分别是：

5-1 vue-router:

cnpm install vue-router --save-dev
如果你想在你的工程中使用，必须在main.js中声明：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

不过，路由的配置文件一般放置在src/router/index.js中。在vue的命名习惯中，index.js一般指配置文件。

5-2 axios和vue-axios

命令和声明：

cnpm install ixios -s
cnpm install --save axios vue-axios

import axios from 'axios';
import VueAxios from 'vue-axios';

//下一行必须这样写 Vue.use(VueAxios,axios); 两个写在一起, 否则就会报错!!
Vue.use(VueAxios,axios);

5-3 element-ui

element-ui是饿了么公司出品的网站快速成型工具，它是基于 Vue 2.0 的桌面端组件库。
命令和声明：

cnpm i element-ui -S

import ElementUI from 'element-ui'
Vue.use(ElementUI);

5-4 SASS加载器

cnpm install sass-loader node-sass --save-dev
注意：这个SASS的版本不能太高，否则项目运行时会报错。 如何降低SASS版本？
从左侧打开idea的项目树，找到package.json并打开，更改里面的版本(降低版本至7.3.1)。

更改完毕后，重新在idea命令行中输入 cnpm install指令，重装一下。

以后在idea工具中更改版本都可以使用此方法。

三、使用idea集成Vue项目

第一步：

管理员打开cmd，执行cd命令，进入你想要搭建项目的那个文件夹中，执行下面一行代码：

vue init webpack hello-vue

这样做就代表了你正在初始化一个webpack项目，名字叫hello-vue。后面命令行弹出来的东西一路选择No或者No开头的东西。本文只提供骨架搭建，其余的后期我们自己配置。

安装完之后打开我们的文件夹，会看到本来是一个空文件夹，出现了如下结构

说明我们这一步成功了。

第二步：

管理员打开cmd，执行cd命令，进入你想要搭建项目的那个文件夹中，依次执行下面一组代码，安装必要依赖(其实就是在我们新建的工程hello-vue中安装一遍这些东西)：

cnpm install vue-router --save-dev
cnpm i element-ui -S
cnpm install
cnpm install sass-loader node-sass --save-dev

第三步：

打开你的idea，Open你刚刚建立的hello-vue文件夹：

之后idea就会帮你接管这个项目了，以后的操作都可以使用idea自带的命令行。如果后期开发需要添加组件，也能在idea自带的命令行中操作了。

至此，我们的Vue-cli就和idea整合完毕了，大家可以愉快的写业务代码了。

后记

本篇内容是我跟狂神老师（bilibili：遇见狂神说）学习的，由于狂神老师自己的博客服务器挂掉了，Vue这一块的教程没有上传至微信公众号（狂神说），所以特此在本文中记录下部分学习笔记，以及个人在学习中总结的心得体会，希望大家批评指正。