vue專案架構
一、生產簡單專案
1、通過cmd控制檯，cd到想要建立專案的資料夾，然後輸入：vue init webpack vueCli
2、進入新建立的專案資料夾，安裝依賴：npm install
3、執行專案：npm run dev
二、配置開發環境和釋出環境的介面地址
1、在控制生產環境的config/dev.env.js檔案中新增開發環境介面地址：BASE_API:'"http://192.168.10.34:8080/api"'
module.exports = merge(prodEnv, { NODE_ENV: '"development"', BASE_API:'"http://192.168.10.34:8080/api"' })
2、在控制釋出環境的config/prod.env.js檔案中新增開發環境介面地址：BASE_API:'"http://www.baidu,com/api"'
module.exports = {
NODE_ENV: '"production"',
BASE_API:'"http://192.168.10.34:8080/api"'
}
3、在src資料夾下新建一個api資料夾，在api資料夾下新增index.js檔案去配置介面呼叫時的地址
const API = process.env.BASE_API注：最後重新啟動專案就可以了,當npm run dev的時候就執行在生產環境,當npm run build的時候就是正式的線上環境.
三、css樣式統一管理
全域性安裝一個scss，在該scss中引入其他scss檔案。
1、安裝node-sass、sass-loader、style-loader（如果安裝一直不能新增成功，檢視是否安裝了python，需要安裝python才能下載成功）
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev 2、安裝sass-resources-loader
cnpm install sass-resources-loader --save-dev
3、修改build中的utils.js
scss: generateLoaders('sass')
修改成:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/global.scss')
}
}
)4、在global.scss檔案中引入其他scss檔案
@import "main.scss";四、引入vuex管理
1、安裝vuex：npm install vuex -S
2、在 main.js 中引入
// 引入vuex
import Vuex from 'vuex'
import store from './store/index'
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
el: '#app',
store,// 引入核心倉庫
router,
components: { App },
template: '<App/>'
})3、構建核心倉庫，
Vuex 應用的狀態 state 都應當存放在 store.js 裡面，Vue 元件可以從 store.js 裡面獲取狀態，可以把 store 通俗的理解為一個全域性變數的倉庫。但是和單純的全域性變數又有一些區別，主要體現在當 store 中的狀態發生改變時，相應的 vue 元件也會得到高效更新。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定義狀態
state: {
author: 'Wise Wrong'
}
})
export default store這是一個最簡單的 store.js，裡面只存放一個狀態 author。雖然在 main.js 中已經引入了 Vue 和 Vuex，但是這裡還得再引入一次。
4、使用store傳遞值，在核心庫裡新增官方修改事件
const store = new Vuex.Store({
// 定義狀態
state: {
author: 'Wise Wrong'
},
// 修改狀態
mutations: {
newAuthor (state, msg) {
state.author(msg)
}
}
})5、在需要的地方修改author值和獲取值
//修改author值
this.$store.commit('newAuthor',this.msg)
//獲取author值
this.$store.state.author6、從vuex中獲取值和方法
import { mapActions, mapGetters } from 'vuex'
computed: {
// 獲取vuex物件
...mapGetters([
'menuitems',
'isLoadRoutes'
// ...
]),
// 從vuex獲取方法
...mapActions([
'addMenu',
'loadRoutes'
])
}五、介面管理
1、安裝axios：npm install axios --save
2、介面代理設定，為了請求可以正常傳送，我們一般要進行一個介面代理的配置，這樣可以避免請求跨域，專案打包之後，後端一般也要搭建一個nginx之類的東西進行轉發請求，不然請求會因為跨域問題失敗的。
//檔案位置：config/index.js
proxyTable: {
'/api': {
target: 'http://47.95.xxx.246:8080', // 通過本地伺服器將你的請求轉發到這個地址
changeOrigin: true, // 設定這個引數可以避免跨域
pathRewrite: {
'/api': '/'
}
},
},設定好了之後，當你在專案中要呼叫http://47.95.xxx.246:8080這個伺服器裡面的介面，可以直接用/api代替伺服器地址。
3、封裝介面，在src資料夾下建立檔案，只有在api下能引用到就好。
六、配置mock環境
1、新增mock服務：npm install mockjs --save-dev
2、在專案的根目錄下新建mock資料夾，將我的本地的testApi的json檔案放在下面(這裡我就沒有用Mock模擬資料，而是用mock指向我本地的json檔案)，然後在mock根目錄下新建server.js檔案，此檔案會將本地的json檔案路徑對映到mock定義的路徑下，然後定義埠號取監聽他的新的url，這裡我們要安裝koa,koa-router模組,例項程式碼如下：
let app = require('koa')()
let router = require('koa-router')()
router.get('/', function *(next) {
this.body = '已進入mock環境!'
})
let leftMenu = require('./testApi/leftMenu.json')
router.get('/mock/leftMenu', function *(next) {
this.body = leftMenu
})
app.use(router.routes())
.use(router.allowedMethods())
app.listen(5000)
3、package.json下的scripts裡面新增mock服務
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"e2e": "node test/e2e/runner.js",
"test": "npm run e2e",
"build": "node build/build.js",
"mock": "node --harmony ./mock/server.js"
},七、路由配置
1、
八、引入Element
1、安裝 loader 模組：
cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D
2、安裝 Element-UI 模組
cnpm install element-ui --save
3、修改 webpack.base.conf.js 的配置
{
test: /\\\\\\\\.css$/,
loader: "style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader: "file"
}
4、在src/main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // elementUI 2.0版本
Vue.use(ElementUI)
之後在vue頁面中就可以直接使用。