vue全家桶项目搭建
一、初始化项目
1、安装vue-cli
所以先需要安装vue-clinode -v 查看node 的版本号，有版本号则已经安装成功：
接下来，我们需要确保电脑已经安装了webpack，webpack是一个包管理工具，也是vue-cli的构建工具，安装也很简单，全局安装只需要执行
npm install webpack -g
紧接着，开始我们vue-cli的安装
npm install --global vue-cli
查看是否安装成功，我们可以通过在cmd中输入vue -V 查看，如下图出现版本号则说明安装已经完成；
2、用vue-cli来构建项目
通过 vue init webpack vue-demo 生成项目，vue-demo 是项目名称，注意名称不能有大写字母。然后和electron-vue 一样根据情况一路 enter。然后在相应目录可看到生成的项目文件：
同样通过
npm install
npm run dev
运行项目后可以看到vue的还原页面：
3、安装Element UI
打开项目根目录下的package.json，里面是项目依赖的一些名称以及项目版本要求和一些基本配置，可以看见配置项里有 dependencies 和 devDependencies 两项，分别代表什么意思呢？当使用 webpack 构建项目时，需要明确不同环境下所需要的依赖和版本要求：
dependencies：是在生产环境下使用的一些依赖，由命令行参数 --save 或者 --save-prod 写入，缩写为 -sdevDependencies：是仅在开发环境下使用的一些依赖，不会再生产环境下使用，由命令行参数 --save-dev 写入，缩写为 -d
如果你仅仅是引入一个在开发期间需要的依赖包，你只需要把它写入在 devDependencies 中，在生产环境发布产品时，是不会加载这些包的。
安装element-ui：
npm install element-ui -s
然后在 main.js 文件中全局引入，打开 src/renderer/main.js：
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
4、vue-router的使用
1、下载vue-router
npm install vue-router --save
2、编码
1、在项目中新建文件夹 router/index.js
/*
* 路由对象模块
* */
import Vue from 'vue'
import VueRouter from 'vue-router'
/*引入pages*/
const MSite = ()=>import('../pages/MSite/MSite');
const Profile = ()=>import('../pages/Profile/profile');
const Patient = ()=>import('../pages/Patient/Patient');
//申明使用插件
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:'/msite',
component: MSite,
meta: {
showFooter: true
}
},
{
path:'/profile',
component:Profile,
meta: {
showFooter: true
}
},
{
path:'/patient',
component:Patient,
meta: {
showFooter: false
}
},
{
path: '/',
redirect: '/msite' //系统默认页
}
]
})
3、在main.js中全局使用router
// 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 Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
new Vue({
el: '#app',
components: { App },
template: '<App/>',
router //引入路由
})
5、 axios的使用
这里我们使用axios发起异步的请求，安装很简单，npm install axios 即可，一开始的时候，我使用的是直接在每个组件内使用axios,到后面发现，但当我需要修改api接口的时候，需要查找的比较麻烦，只因为没有集中的对所有的api进行管理，而且每个请求回来的接口都需要写对应的报错处理，着实麻烦，这里我新建一个api 文件夹并在其下新建一个index.js用来存放所有的axios处理和封装，
//api/index.js
import axios from 'axios'
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params).then(
response => {
resolve(response.data)
}
).catch(error => {
console.log(error)
reject(error)
})
})
}
getDefaultData=()=>{
return fetch('/api/getBoardList');
}
export default {
getDefaultData
}
这样做的好处是集中化的管理了所有的api接口，当我们需要修改接口相关的代码，只需要在index.js中修改，包括路由修改以及路由拦截等，可读性更好；在不同的组件内，我们只需要把对应的接口用解构赋值的思想把它引入对应的组件内即可使用。
import {getDefaultData} from '@/api/index.js'
6、代理服务器的配置
这个功能主要是我们在调试接口的时候使用，因为当我们运行npm run dev 的时候，实际上我们的项目已经挂载在一个本地服务端运行了，端口号为我们配置的8080，当我们想在该项目下访问服务端接口数据的时候，就会产生跨域的问题，这个时候，我们就需要使用到proxy代理我们的数据请求，在vue-cli中已有配置相关的代码，我们仅需要把对应的代理规则写进去即可，这里以一个通用配置例子实现;
首先，我们在api文件夹下新建一个config.js的文件，用于存放我们的代理路径配置：
const url = 'http://www.demo.com/';
let ROOT;
if (process.env.NODE_ENV === 'production') {
//生产环境下的地址
ROOT = url;
} else {
//开发环境下的代理地址，解决本地跨域跨域，配置在config目录下的index.js dev.proxyTable中
ROOT = "/"
}
exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;
接下来，我们要在config目录下新建一个proxyConfig.js,存放代理服务器的配置规则：
var config= require("../src/fetch/config");
module.exports = {
proxy: {
[config.ROOT]: { //需要代理的接口，一般会加前缀来区分，但我个人是没加，即‘/’都转发代理
target: config.PROXYROOT, // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
[`^/`]: '' //需要rewrite的，针对上面的配置，是不需要的
}
}
}
}
最后，我们在config目录下的index.js文件中，引入我们的代理规则,并在，即
var proxyConfig=require('./proxyConfig')
...//省略号表示省略其他代码
module.exports = {
...
proxyTable: proxyConfig.proxy,
...
}
重新启动项目，我们就可以做到代理转发来实现跨域请求了。
7、vuex的使用
vuex:同一状态（全局状态）管理，简单的理解，在SPA单页面组件的开发中，在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、修改，并且你的修改可以同步全局。
1，安装 npm i vuex --save
2，在src文件目录下新建 store>index.js 文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
3， 入口文件里面引入store，然后再全局注入
import store from './store'//引入store
new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
4、使用
4-0、在state中定义数据
4-1、getter 相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，getters 可以用于监听、state中的值的变化，返回计算后的结果
4-2、给action注册事件处理函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参
4-3、mutations是一个对象里。面的方法 都是同步事务，是更改state初始状态的唯一合法方法，具体的用法就是给里面的方法传入参数state或额外的参数
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
最后可以自行安装mock.js,这里不做过多介绍，完成之后的项目结构：
注：本文档可能还需要完善调整，后面会再改。