vue项目搭建

工具安装

1、安装node
2、安装webpack: npm install webpack -g
3、安装vue-cli脚手架构建工具: npm install vue-cli -g

搭建项目

1、vue init webpack demo (demo是项目名)
2、后面的除了路由router需要输入Y外，其他的都直接回车或输N
搭建成功后
3、npm install (安装npm )
4、npm run dev (启动项目)

安装vux

5、npm install vux --save (安装或更新)
6、npm install vux-loader --save-dev （这个官方文档里没有说，但是不安装会报错）
7、npm install less less-loader --save-dev
8、在build/webpack.base.conf.js 文件进行配置

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

修改配置文件应该是要重新启动项目的，我当时没重启，结果引入vux组件的时候报错了，重启项目就好了

安装aixos

npm install axios --save
在需要用到请求的地方引入 import axios from 'axios'

安装vuex

官方文档
npm install vuex --save

在src下新建store文件夹

image.png

index.js

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

import user from './modules/user'

Vue.use(Vuex)


export default new Vuex.Store({
  modules: {
    user,
  }
})

user.js

const state = {
  token:null
}

const getters = {

}

const mutations = {

}

const actions = {
  
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

main.js

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,  //加入srore
  components: { App },
  template: '',
  render: h => h(App)
})

参考：vux框架的安装使用
vue之axios使用