1、安装配置vue

前提是已经安装并配置好node和npm环境，先搭建vue脚手架 vue-cli

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project 切换到你创建的文件夹下

$ npm install 安装依赖

$ npm run dev 开始你的项目

$ npm run build 编译打包你的项目

补充：打包好的文件夹dist中的index需在服务环境中打开，报以下错误时

打开index.html报错截图

检查一下css的引入路径，修改一下就好了

2、安装iview

可以打开iview的官网：iview官网查看指南，都比较详细

我选择的是用npm安装

$ npm install iview --save

3、引入iview

一般在 webpack 入口文件 main.js 中如下配置：

import Vue from 'vue';

import VueRouter from 'vue-router';

import App from 'components/app.vue';

import Routers from './router.js';

import iView from 'iview'; //引入iview

import 'iview/dist/styles/iview.css'; //引入iview的css样式文件，后面如果需要自己配置也可以新建文件进行修改

Vue.use(VueRouter);

Vue.use(iView); //use使用这个插件

// The routing configurationconst RouterConfig = { routes: Routers};

const router = new VueRouter(RouterConfig);

new Vue({ el: '#app', router: router, render: h => h(App)});

如果觉得iview整个配置太大，也可以按需引用

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev

// .babelrc

{ "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]]}

然后这样在需要使用的页面中按需引入组件，就可以减小体积了：

import { Button, Table } from 'iview';

Vue.component('Button', Button);

Vue.component('Table', Table);

注：css文件还是要在main.js中引用的

5、引用后续出现的问题

6、接口调用post请求报错

运用post请求数据时，参数无法传递到后台

解决：加上emulateJSON:true

7、后台处理登录，前台传参附加参数

{withCredentials: true} //一般jQuery和js中的写法

或者 {credentials: true} //vue中的写法

注意：添加的credentials: true需要与params并列，不能放错了位置！！！

8、项目中用到的一些方法

获取当前页面的url

获取完整url可以用 window.location.href

获取路由路径可以用 this.$route.path

获取路由路径参数 this.$route.params

9、iview中分页的使用

template部分

js部分

10、监听路由变化

注意watch方法

11、ico图标的添加

11.1、直接将favico.ico丢到根目录(就是src同级的目录)，然后在build/webpack.dev.conf.js文件中配置

在webpack.dev.conf.js文件中的plugins里加入这段代码（我的这个没有生效，用的是第二种方法）

11.2、把favicon放入static文件夹下

12、打包出来dist文件夹中的index.html直接打开显示空白

找到配置文件config/index.js,修改以下位置

13、打包出来的样式中的背景图片样式问题

找到build/utils.js文件

修改成为如下所示内容：

14、打包后，引用的iview中的icon图标不显示，并且路径重复

在 build/webpack.prod.conf.js 中,将里边的 extract改为false,默认是true

15、将localhost换成本地ip

修改config文件夹下面的index.js配置，将localhost改为0.0.0.0就可以了。用ip，127.0.0.1，localhost均行

16、打包后首页加载很慢，优化首页加载速度的方法

16.1、路由懒加载

路由懒加载

16.2、gzip压缩

config/index.js中的build下的productionGzip: true,不过需要提前安装插件

npm install --save-dev compression-webpack-plugin

gzip压缩

16.3、第三方库选择cdn的方式引入

在index.html的文件中直接引入，在main.js和router/index.js中用import方式引入的就可以去掉了，

用cdn的方式引入第三方js库

17、登录时，绑定enter键

在最后一个input上绑定（有多个input的情况也可以在多个input上绑定）

登录绑定enter事件

18、路由回退上一级

有些详情页展示内容一样时，就会共用一个组件，但是头部导航就不能固定，因此可以使用vue的路由回退的功能

备注：如果页面是分享出去，需要判断是否有上一级

在页面一开始加上一个全局的函数：

activated:function(){

this.$setgoindex()

}

这个函数是这样的，判断当前页面的历史记录是不是小于等于1，如果小于等于1，说明这个页面没有可以返回的上一页，如果没有可以返回的上一页，就给地址栏加上一个goindex=true的参数，这样你从这个页面在往下一个页面跳转在返回，这个参数就一直加上的

Vue.prototype.$setgoindex =function(){

    if(window.history.length <=1) {

        if(location.href.indexOf('?') ===-1) {

            window.location.href = location.href +'?goindex=true'

        }elseif(location.href.indexOf('?') !==-1&& location.href.indexOf('goindex') ===-1) {

            window.location.href = location.href +'&goindex=true'

        }

    }

}

然后在左上角返回按钮加上这个逻辑：