一、安装和配置nodejs环境

1、安装nodejs环境

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。

安装步骤教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

//查看版本
$ node -v
$ npm -v

2、设置npm仓库

//注册淘宝NPM镜像
npm config set registry https://registry.npm.taobao.org
npm config get registry 

//查看npm当前配置
npm config list 

更多信息可以查阅：http://npm.taobao.org/。

3、设置本地仓库路径

首先，创建两个文件夹 node_gobal 和 node_cache

其次，使用命令行，修改npm配置项，命令行如下：

// 修改配置全局模块安装仓库
npm config set prefix "D:\nodejs-repository\node_gobal"
// 修改缓存存储位置
npm config set cache "D:\nodejs-repository\node_cache"

然后，命令行中输入 npm config list ，查看配置信息是否修改成功；

二、创建vue项目

1、安装vue2.0

// 安装vue-cli
npm install -g vue-cli

2、使用vue-cli创建项目

• (1) 构建项目

使用如下命令初始化一个名为myproject的项目

vue init webpack myproject

执行过程如下：

D:\nodejs-projects> vue init webpack myproject

? Project name myproject
? Project description A Vue.js project
? Author tangyibo <tangyibo@ruijie.com.cn>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

• (2) 启动项目

cd myproject/
npm run dev

三、Vue项目常用组件安装配置

1、使用 axios 来完成 ajax 请求。

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

• (1)、安装axios

npm install axios --save

• (2)、引入axios

在main.js中引入axios,注意：下面使用的是：

import Axios from 'axios'

Vue.prototype.$http = Axios  //在Vue的原型上添加$axios方法

2、ElementUI界面组件

Vue.js 2.0 版本推荐使用ElementUI进行界面组件的设计。

• (1)、安装ElementUI

官方文档：https://element.eleme.cn/#/zh-CN/component/quickstart

安装命令：

npm i element-ui -S

• (2)、整合Vue.js项目

在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

• (3)、element-ui使用导航栏跳转路由用法

参考文章：https://blog.csdn.net/jokren/article/details/86306542

使用菜单栏进行路由跳转有几个注意点：

• （1）在el-menu加上:router=“true”
• （2）index必须绑定路由的path,参考上面的例子，’/’不能少
• （3）default-active设为当前路由（this.$route.path）,这样在路由变化的时候，对应的menu-item才会高亮。

3、echarts图形绘制

• (1)、安装echarts

npm install echarts -S

或者使用淘宝的镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

• (2)、整合Vue.js项目

在 main.js 中写入以下内容：

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

4、在Vue.js项目中对象的深拷贝

let target=JSON.parse(JSON.stringify(this.origin)); 

四、FAQ

1、Vue.js - 解决部署到服务器后Element UI图标不显示问题（404错误）

解决参考地址： https://www.hangge.com/blog/cache/detail_2473.html

2、Vue解决webpack打包后请求接口404问题

解决参考地址：https://www.jianshu.com/p/686f17737ffb

3、maven 打包导致字体不可用问题

解决参考地址：https://blog.csdn.net/clks_/article/details/103304746

4、maven 打包SpringBoot与Vue.js工程

参考地址：https://www.cnblogs.com/kevinZhu/p/9931317.html

5、安装less的命令

npm install --save-dev less-loader less