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
 ? (dateObj.getMonth() + 1).toString()
 : "0" + (dateObj.getMonth() + 1).toString();
 var date =
 dateObj.getDate() > 9
 ? dateObj.getDate().toString()
 : "0" + dateObj.getDate().toString();
 var hour =
 dateObj.getHours() > 9
 ? dateObj.getHours().toString()
 : "0" + dateObj.getHours().toString();
 var minutes =
 dateObj.getMinutes() > 9
 ? dateObj.getMinutes().toString()
 : "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)
 }
 }