vue初始化項目，構建vuex的後臺管理項目架子

構架vuex的後臺管理項目源碼： https://github.com/saucxs/structure-admin-web

 

1、node安裝

能夠參考這篇文章http://www.mwcxs.top/page/220.html 

 

2、vue-cli 全局安裝

命令行執行 : npm install -g vue-cli    // 加-g是安裝到全局

安裝完成之後 能夠輸入命令 ：vue 回車，能夠看到針對vue的命令行；

 

3、初始化項目

執行命令： vue init webpack structure(你新建的項目名稱/文件名稱)

執行以後將會 自動初始化一個文件夾 ：structure

 

4、啓動項目

繼續執行： cd demo (這是進入到demo文件夾的命令)

 而後執行 安裝 ：npm install

注： npm install 執行能夠進行vue已經vue的插件安裝，在第三步的時候，已經初始化了項目，而且在 package.json 裏面已經有相關配置，因此在這裏能夠直接安裝；

 安裝完成以後再執行命令： npm run dev 

整個項目就已經啓動了：

 

5、修改項目結構

目前的項目結構：

（1）在src下新建vuex文件夾，在vuex文件夾下面新建modules文件夾，文件夾下放的相應模塊js，actions.js，getters.js，index.js，mutation-types.js

（2）新建一個api文件夾，用來寫axios的請求借口,裏面放一個api.js，config.js

（3）新建views，用來存放業務模塊

如今的項目結構：

 

 

 6、在main.js裏面引入vuex，element等

import Vue from 'vue'
import App from './App'
import router from './router'

// 引入vuex
import Vuex from 'vuex' import store from './vuex'

Vue.config.productionTip = false

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

 

以上一個架子就搭好了，

那咱們想搭一個管理後臺的架子，還須要接着coding

 

 

7、新建頭部組件，左側導航菜單，內容區

首先在.postcssrc.js增長內容

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    // 8-2
    "postcss-cssnext": {}
  }
}

而後安裝postcss-cssnext插件，npm install -g postcss-cssnext

 

 在components中新建header.vue，menu.vue，footer.vue

 能夠參考源碼：https://github.com/saucxs/structure-admin-web

 

8、運行以後