删除vue-cli
cnpm uninstall vue-cli -g
安装vue-cli 3
npm install -g cnpm --registry=https://registry.npm.taobao.org (淘宝源)
cnpm install -g @vue/cli@3.11.0
安装vuex
npm install vuex --save
在assets文件同级目录新建store文件夹,里面新建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {}, shops: [], baseUrl: 'http://plateform.com:81', shopInfo: {}
},
getters: {
user(state) {
return state.user;
},
shops(state) {
return state.shops;
},
baseUrl(state) {
return state.baseUrl;
},
shopInfo(state) {
return state.shopInfo;
}
},
mutations: {
setUser(state, user) {
state.user = user
},
setShops(state, shops) {
shops.forEach((v) => {
state.shops.push(v)
})
},
setShopInfo(state, shopInfo) {
state.shopInfo = shopInfo;
}
},
actions: {
//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
getShopInfo({state, commit}, param) {
return new Promise((resolve,reject)=>{
console.log('getShopInfo')
axios.get(state.baseUrl + '/api/shop/' + param.id)
.then((data) => {
console.log(data)
commit('setShopInfo', data.data)
resolve();
})
.catch((err) => {
console.log(err)
reject();
})
})
}
}
})
安装 router
npm install vue-router
router.js的内容,在和App.vue同级新建router文件夹,然后新建index.js(也可以取名router.js)
import Vue from 'vue'
import Router from 'vue-router'
import Index from './views/Index.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Index
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/info/:id',
name: 'info',
component: () => import('./views/ShopInfo.vue')
}
,
{
path: '/guid',
name: 'guid',
component: () => import('./views/Guid.vue')
}
]
})
安装anxios
Npm install axios -S
安装element ui
npm i element-ui -S
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
关于main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'//引入sotre
import router from './router'//引入router
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
//router.beforeEach((to, from, next) => {
// console.log('进入守卫')
// console.log(to)
//})
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
上述内容部分转载连接:
https://www.cnblogs.com/joe235/p/12013818.html