一、安装 nodejs

建议安装 v 7.9.0 本人使用的此版本比较好

二、安装 安装vue、创建vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

三、安装 iView

前端组件，用于快速开发

# npm 安装
$ npm install iview --save

引入 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';
import 'iview/dist/styles/iview.css';    // 使用 CSSVue.use(VueRouter);
Vue.use(iView);// 路由配置
const RouterConfig = {routes: Routers
};
const router = new VueRouter(RouterConfig);new Vue({el: '#app',router: router,render: h => h(App)
});

四、安装vue-router 2

路由处理机制

• vue-router2 开发手册

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)

使用

在scr/router/index.js

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld');export default new Router({routes: [{path: '/',name: 'Hello',component: HelloWorld}]
})

五、安装vuex

NPM

npm install vuex --save

创建目录结构

- src-- store--- index.js--- Public---- action.js---- getters.js---- index.js---- mutations.js---- state.js

store - index.js

import Vue from 'vue'
import vuex from 'vuex'
import Public from './Public'Vue.use(vuex);let Store = new vuex.Store({modules: {Public}
})export default Store

store - Public - action.js

export default {}

store - Public - getters.js

export default {}

store - Public - index.js

import actions from './action.js'
import getters from './getters.js'
import mutations from './mutations.js'
import state from './state.js'export default {actions,getters,mutations,state
}

store - Public - mutations.js

export default {}

store - Public - state.js

export default {test: '测试数据，调用缓存里静态变量',
}

调用

main.js 导入 store

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'Vue.config.productionTip = falseVue.use(iView)/* eslint-disable no-new */
new Vue({el: '#app',router,store,template: '<App/>',components: { App }
})

组件里

<template><div class="hello">{{test}}</div>
</template><script scoped>
import { mapState } from 'vuex'
export default {data () {return {}},computed:{...mapState({test:store => store.Public.test})}
}
</script>

六、安装axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

npm

npm install axios --save

src 文件夹下添加 api/index.js

import axios from 'axios'
import qs from 'qs'let toLogin = () => {MessageBox('提示', '您还没有登录，请先登录');router.push({ name: 'Hello' })
}
axios.defaults.baseURL = '/api';
axios.defaults.timeout = 10000;axios.interceptors.request.use(function (config) {return config;},function (error) {return Promise.reject(error);}
);axios.interceptors.response.use(function (res) {if (res.data && res.data.status == "401") {toLogin();}if (res && res.data && res.data.status != "200") {res.data.data = {};}return res;},function (error) {return Promise.reject(error);}
);export default {get: (urlName = '', params = {}) => {return axios.get(urlName,{params: params}).then((res) => {return res.data;})},post: (urlName = '', params = {}) => {return axios.get(urlName,qs.stringify(params)).then((res) => {return res.data;})}
}

main.js 中导入 api/index.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'
import Api from './api'Vue.config.productionTip = falseVue.use(iView)
Vue.prototype.$ajax = Api;/* eslint-disable no-new */
new Vue({el: '#app',router,store,template: '<App/>',components: { App }
})

在config 文件夹下 的 index.js文件中添加 端口转发 proxyTable

  dev: {env: require('./dev.env'),port: process.env.PORT || 8080,autoOpenBrowser: true,assetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target: 'http://rapapi.org/mockjsdata/20113/',changeOrigin: true,pathRewrite: {'^/api': ''}}},cssSourceMap: false}

程序中调用

<template><div class="hello">测试MadDragon</div>
</template><script scoped>
import { mapState } from 'vuex'
export default {data() {return {}},mounted() {this.getData();},methods: {getData() {this.$ajax.get('custom/operateproblem/getOperateProblemList').then((e) => {console.log(e)})}}
}

七、安装moment.js

JavaScript 日期处理类库

npm

npm install moment --save   # npm

单个组件内使用

<template><div class="hello">测试MadDragon</div>
</template><script scoped>
import moment from 'moment'export default {data() {return {}},mounted() {console.log(moment().format('YYYY-MM-DD'))console.log(moment().format('x'))},
}
</script>

全局导入使用

在main.js 中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'
import Api from './api'
import moment from 'moment'Vue.config.productionTip = falseVue.use(iView)Vue.prototype.$ajax = Api;
Vue.prototype.$moment = moment;/* eslint-disable no-new */
new Vue({el: '#app',router,store,template: '<App/>',components: { App }
})

组件中使用

<template><div class="hello">测试MadDragon</div>
</template><script scoped>export default {data() {return {}},mounted() {console.log(this.$moment().format('YYYY-MM-DD'))console.log(this.$moment().format('x'))},
}
</script>

八、使用sessionStorage

浏览器缓存

src 下创建 sessionStorage/index.js 文件

const setItem = (key, data) => {if (!data || !key) return;sessionStorage.setItem(key, JSON.stringify(data));
}const getItem = (key) => {if (!key) return;let data = sessionStorage.getItem(key);if (!data) return;return JSON.parse(data);
}const removeItem = (key) => {if (!key) return;sessionStorage.removeItem(key);
}const OPL = 'operateProblemList';
export const opl = {set: (data) => { setItem(OPL, data) },get: () => { return getItem(OPL) },remove: () => { removeItem(OPL) }
}

使用

移除、设置

import { opl } from '@/sessionStorage/index'
export default {setOperateProblemList(state, data) {opl.remove()opl.set(data)}
}

获取

import { opl } from '@/sessionStorage/index'
export default {test: '测试数据，调用缓存里静态变量',operateProblemList:opl.get(),
}

九、配置UEditor富文本编辑器

1、下载 jsp 或 php

下载UEditor官网最新的jsp版本的包，下载完成解压之后得到一个ueditor1_4_3_3-utf8-jsp的文件夹，里面包含的内容如下：

除了jsp的文件夹之外，其余的文件和文件夹复制到前端项目中的static用于存放静态文件的目录下，结构如下：

这里特别说明jsp目录下的资源为何不放进来，因为我们是vue搭建的项目，jsp页面肯定是不会放在前端的项目中的，包括config.json也放在后端用于解析，这里后面会解释这样做的原因。

2、修改配置

uedior 配置文件相关根目录： src/assets/utf8-php/ueditor.config.js 中将 window.UEDITOR_HOME_URL = "/static/utf8-php/";

3、在 main.js 中引入

import '../static/utf8-php/ueditor.config'
import '../static/utf8-php/ueditor.all.min'
import '../static/utf8-php/lang/zh-cn/zh-cn'
import '../static/utf8-php/ueditor.parse.min'

4、创建公共组件

\src\components\ue\index.vue

<template><div><script :id=id type="text/plain"></script></div>
</template>
<script>export default {name: 'UE',data () {return {editor: null}},props: {defaultMsg: {type: String},config: {type: Object},id: {type: String},},mounted() {const _this = this;this.editor = UE.getEditor(this.id, this.config); // 初始化UEthis.editor.addListener("ready", function () {_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。});},methods: {getUEContent() { // 获取内容方法return this.editor.getContent()}},destroyed() {this.editor.destroy();}}
</script>

5、调用

\src\views\editor\editor.vue

<template><div class="components-container"><button @click="getUEContent()">获取内容</button><div class="editor-container"><UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE></div></div>
</template>
<style>.info{border-radius: 10px;line-height: 20px;padding: 10px;margin: 10px;background-color: #ffffff;}
</style>
<script>// import UE from '@/components/ue/ue.vue';import UE from '../../components/ue'export default {components: {UE},data() {return {defaultMsg: 'editor.vue?5c45:42 <p style="text-align: left; margin-bottom: 5px;">这里是U</p><p style="text-align: center; margin-bottom: 5px;"><img src="/ueditor/php/upload/image/20171015/1508063519822204.jpg" title="1508063519822204.jpg"/></p><ol class=" list-paddingleft-2" style="list-style-type: decimal;"><li><p style="line-height: normal; margin-bottom: 10px;"><img src="/ueditor/php/upload/image/20171015/1508063519100952.jpg" title="1508063519100952.jpg"/><img src="http://img.baidu.com/hi/jx2/j_0047.gif"/><img src="http://img.baidu.com/hi/jx2/j_0029.gif"/>szdfs18:44:04</p></li><li><p style="margin-bottom: 5px;">sdfsd</p></li><li><p style="margin-bottom: 5px;">sdf</p></li></ol><p style="margin-bottom: 5px;">sdf<br/></p><pre class="brush:php;toolbar:false;">h</pre><p style="margin-bottom: 5px;"><br/></p><p style="margin-bottom: 5px;"><br/></p><pre class="brush:diff;toolbar:false">sssfsdsdfsdfsdfsdf</pre><p><br/></p><p><br/></p><p style="margin-bottom: 5px;">E测试<br/></p>',config: {initialFrameWidth: null,initialFrameHeight: 350},ue1: "ue1", // 不同编辑器必须不同的id}},methods: {getUEContent() {let content = this.$refs.ue.getUEContent(); // 调用子组件方法// this.$notify({//   title: '获取成功，可在控制台查看！',//   message: content,//   type: 'success'// });console.log(content)}}};
</script>

6、配置路由

\src\router\index.vue

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const Hello = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'Hello');
const editor = r => require.ensure([], () => r(require('@/views/editor/editor')), 'editor');const courses = r => require.ensure([], () => r(require('@/views/selective/courses')),'courses')export default new Router({mode: 'history',routes: [{path: '/',name: 'Hello',component: Hello},{path: '/ue',name: 'ue',component: editor},{path: '/courses',name: 'courses',component: courses}]
})

7、配置 图片上传服务

将UEditor项目中地 jsp / php 单独搭建服务跑起来 我用地php 所以这里将展示php相关操作

nginx 配置（已有完成php运行环境，没有请先搭建）

# E:\web\ueditor\php# 图片上传PHP程序server {listen      6004;server_name    127.0.0.1;location / {root  E:/web/ueditor/php;index    index.html index.htm index.php;#访问路径的文件不存在则重写URL转交给ThinkPHP处理  if (!-e $request_filename) {  rewrite  ^/(.*)$  /index.php/$1  last;  break;  }  }error_page   500 502 503 504  /50x.html;location = /50x.html {root    E:/web/ueditor/php;}location ~ \.php {root  E:/web/ueditor/php;fastcgi_pass 127.0.0.1:9000;fastcgi_index    index.php;#加载Nginx默认"服务器环境变量"配置  include        fastcgi.conf;  #设置PATH_INFO并改写SCRIPT_FILENAME,SCRIPT_NAME服务器环境变量  set $fastcgi_script_name2 $fastcgi_script_name;  if ($fastcgi_script_name ~ "^(.+\.php)(/.+)$") {  set $fastcgi_script_name2 $1;  set $path_info $2;  }  fastcgi_param   PATH_INFO $path_info;  fastcgi_param   SCRIPT_FILENAME   $document_root$fastcgi_script_name2;  fastcgi_param   SCRIPT_NAME   $fastcgi_script_name2;  }}#selective-courses-systeserver {listen       6005;server_name  192.168.2.213;#selective-courses-systelocation / {proxy_pass http://192.168.2.213:8080;}#图片上传location /static/utf8-php/php/ {proxy_pass http://192.168.2.213:6004/;}#图片查看location /ueditor/ {proxy_pass http://192.168.2.213:6004/ueditor/;}}

8、重启nginx 完成

十、安装Element UI

npm 安装

npm i element-ui -S

导入 在main.js 中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import store from './store'
import Api from './api'
import moment from 'moment'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'import '../static/utf8-php/ueditor.config'
import '../static/utf8-php/ueditor.all.min'
import '../static/utf8-php/lang/zh-cn/zh-cn'
import '../static/utf8-php/ueditor.parse.min'Vue.use(iView)
Vue.use(ElementUI)Vue.config.productionTip = falseVue.prototype.$ajax = Api;
Vue.prototype.$moment = moment;/* eslint-disable no-new */
new Vue({el: '#app',router,store,template: '<App/>',components: { App }
})

使用

<template><div><div><el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="id" width="180"></el-table-column><el-table-column prop="kcName" label="课程" width="180"></el-table-column><el-table-column prop="xuefen" label="学分"></el-table-column><el-table-column prop="leibie" label="类别"></el-table-column><el-table-column prop="teacher" label="任教老师"></el-table-column><el-table-column prop="xianxuan" label="限选"></el-table-column><el-table-column prop="yixuan" label="已选"></el-table-column><el-table-column prop="kexuan" label="可选"></el-table-column><el-table-column label="操作"><template scope="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></div>
</template><script>
export default {data() {return {tableData: [{ "id": 1, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 2, "kcName": "语文课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "260", "yixuan": "200", "kexuan": "60" }, { "id": 3, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 4, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 5, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 6, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 7, "kcName": "测试课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 8, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 9, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 10, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 11, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 12, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 13, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 14, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 15, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 16, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 17, "kcName": "数学课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }, { "id": 18, "kcName": "体育课", "xuefen": 2, "leibie": "公共课", "teacher": "王红", "xianxuan": "240", "yixuan": "200", "kexuan": "40" }],//接口获取数据};},methods: {handleEdit(index, row) {console.log(index, row);},handleDelete(index, row) {console.log(index, row);}}
}
</script><style scoped></style>