vue项目搭建以及全家桶的使用详细教程(小结)

node -v

npm install webpack -g

npm install --global vue-cli

vue init webpack projectName

npm install

npm run dev

npm install iview --save

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.config.productionTip = false
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

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

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

<template>
 <div class="content">
  <div class="title">患者接诊</div>
  <div>
   <Button type="primary" shape="circle" class="btn-time">临时保存</Button>
   <Button type="primary" shape="circle" class="btn-cancel">取消就诊</Button>
   <Button type="primary" shape="circle" class="btn-done">完成就诊</Button>
  </div>
 </div>
</template>

<script>
 import {Button} from 'iview'
 export default {
  name: "fHeader",
  components:{
   Button
  }
 }
</script>

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

Vue.use(Router)

export default new Router({
 scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
 },
 routes: [
  {
   path:'/',
   redirect:'/root'
  },
  {
   path: '/root',
   name: 'root',
   components: {
    Left:() => import('@/page/rootLeft.vue'),
    Middle: () =>import('@/page/rootMiddle.vue'),
    Right: ()=>import('@/page/rootRight.vue')
   }

  }

 ]
})

{
   path:"/test",
   name:"test",
   component: ()=>import(/*webpackChunkName:"test"*/'@/page/test.vue')
}

const fullTime = val => {
 var dateObj = new Date(Number(val));
 var year = dateObj.getFullYear();
 var month =
  dateObj.getMonth() + 1 > 9
   "0" + (dateObj.getMonth() + 1).toString();
 var date =
  dateObj.getDate() > 9
   "0" + dateObj.getDate().toString();
 var hour =
  dateObj.getHours() > 9
   "0" + dateObj.getHours().toString();
 var minutes =
  dateObj.getMinutes() > 9
   "0" + dateObj.getMinutes().toString();

 return year + "/" + month + "/" + date + " " + hour + ":" + minutes;
};
module.exports={
 fullTime
}

import Vue from 'vue'
import App from './App'
import router from './router'
import filters from './assets/js/filters'
import 'iview/dist/styles/iview.css';

Object.keys(filters).forEach(key =>{
 Vue.filter(key,filters[key])
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

//components.js下
import testInput from '@/components/testInput.vue'

export default{
 testInput:testInput
}

//main.js下
import components from './assets/js/components'

Object.keys(components).forEach(key => {
 Vue.component(key,components[key])
})

//fetch/api.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
}

import {getDefaultData} from '@/fetch/api.js'

const url = 'http://www.dayilb.com/';
let ROOT;
if (process.env.NODE_ENV === 'production') {
 //生产环境下的地址
 ROOT = url;
} else {
 //开发环境下的代理地址，解决本地跨域跨域，配置在config目录下的index.js dev.proxyTable中
 ROOT = "/"
}

exports.PROXYROOT = url; //代理指向地址
exports.ROOT = ROOT;

var config= require("../src/fetch/config");
module.exports = {
 proxy: {
  [config.ROOT]: {  //需要代理的接口，一般会加前缀来区分，但我个人是没加，即‘/'都转发代理
   target: config.PROXYROOT, // 接口域名
   changeOrigin: true, //是否跨域
   pathRewrite: {
    [`^/`]: ''  //需要rewrite的，针对上面的配置，是不需要的
   }
  }
 }
}

var proxyConfig=require('./proxyConfig')
...//省略号表示省略其他代码
module.exports = {
...
proxyTable: proxyConfig.proxy,
...
}

npm install vuex

import Vue from 'vue'
import Vuex from 'vuex'

import actions from '@/store/actions.js'
import getters from '@/store/getters.js'
import mutations from '@/store/mutations.js'

Vue.use(Vuex)
const state = {
 recipeList:[],
 currRecipe:0
};
if (module.hot) {
 // 使 action 和 mutation 成为可热重载模块
 module.hot.accept(['./mutations'], () => {
  // 获取更新后的模块
  // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
  const newMutations = require('./mutations').default;
  // 加载新模块
  store.hotUpdate({
   mutations: newMutations,
  })
 })
}
export default new Vuex.Store({
 state,
 mutations,
 getters,
 actions
})

import store from './store/index'

...
new Vue({
 el: '#app',
 router,
 store,
 components: {App},
 template: '<App/>'
})

//mutationType.js
export default {
 ADD_NEW_RECIPT:'ADD_NEW_RECIPT',
 CHANGE_CURR_TAB:'CHANGE_CURR_TAB'
}

//mutations.js
import mutationTypes from '@/store/mutationTypes.js'

const mutations = {
  [mutationTypes.ADD_NEW_RECIPT](state, item) {
   state.recipeList.push(item);
  },
  [mutationTypes.CHANGE_CURR_TAB](state, index) {
   state.currRecipe=index;
  }
 }
;
export default mutations

import mutationTypes from '@/store/mutationTypes.js'

const actions = {
 add_new_recipt:({commit,state}, type)=>{
  commit(mutationTypes.ADD_NEW_RECIPT,type);
 },
 change_curr_tab:({commit},index)=>{
  commit(mutationTypes.CHANGE_CURR_TAB,index)
 }
};

export default actions

import {mapActions, mapState} from 'vuex'
...
computed: {
   ...mapState({
    recipeList: state => state.recipeList,
    currRecipe: state => state.currRecipe
   })
  },
methods: {
   ...mapActions([
    'add_new_recipt',
    'change_curr_tab'
   ]),
   addNewRecipt(type) {
    this.add_new_recipt(type)
   }
  }