从0开始写一个vue项目

搭建vue脚手架项目：
vue init webpack 项目名

111.使用element ui
下载 npm i element-ui -S 全部引入
111.vue中使用js-cookie
npm install js-cookie --save
import Cookie from ‘js-cookie’
Cookie.set(‘token’，token)
Cookie.get(‘token’)

node运行在服务器端的js，包管理器有npm

使用 vue3
1.npm install -g @vue/cli 下载全局vue脚手架
2.vue create 项目名称 创建vue项目
a，手动选择自定义操作 Manually
空格选择，回车确定。
b. 安装：babel、router、vuex、css、linter
c.安装完成后cd到项目中使用 vue add vue-next配置vue3的库
3.根目录下新建vue.config
完成换源等配置：
module.exports={
devServer:{
proxy:{
“/api”:{
target:‘http://web.juhe.cn:8888’,
changeOrigin:true,
ws:true,
secure:false,
pathRewrite:{
“^/api”:’’
}
},
},
// 关闭代码检查
overlay:{
warnings:false,
errors:false
}
},
lintOnsave:false
}
4.安装axios和qs
npm i -s axios qs
5.进入src目录删除无关的代码
6.添加需要的js、css及组件文件

Vuex的全面用法总结：
VueX是用来管理vue.js应用程序中状态的插件。它是将应用中的所有状态（data）都放在一起，集中管理。

action：数据输入
state：数据输出
注意：只能在mutaions里修改state，actions不能直接修改state
（mutations即变化，修改state的数据，而且只能是同步的，不能存在异步的操作。如果需要异步怎么办呢？把异步操作放在actions里，拿到数据再通过mutations同步处理。）
VueX核心概念：
1.store：
vuex 中最关键的是store对象，这是vuex的核心。vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
1.1.1创建store：
const store = new Vuex.Store({…});
store中包含5个对象：
1.1.11state – 存放状态

1.1.12.getters – state的计算属性

1.1.13.mutations – 更改状态的逻辑，同步操作

1.1.14.actions – 提交mutation，异步操作

1.1.15.mudules – 将store模块化
注意：
a：store中存储的状态是响应式的，若store中状态发生改变相应的组件也
会更新。
b：不能直接改变store中的状态，改变store中的状态的唯一途径是提交(commit)mutations。
1.1.1完整的store结构
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑，同步操作
},
actions: {
// 提交mutation，异步操作
},
// 如果将store分成一个个的模块的话，则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// …
}
});
1.2 state
没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。
1.2.1在组件中获取VueX的状态
import store from ‘store’;
const Counter = {
template: <div>{{ count }}</div>,
computed: {
count () {
// 获取store中的状态
return store.state.count;
}
}
}
每个组件中都需要反复倒入store。可以将store注入到vue实例对象中去，这样每一个子组件中都可以直接获取store中的状态，而不需要反复的倒入store了。
const app = new Vue({
el: ‘#app’,
// 把 store 对象注入到了
store,
components: { Counter },
template: <div> <counter></counter> </div>
});
1.2.2 mapState
当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用mapState辅助函数来帮我们生成计算属性。
mapState 函数返回的是一个对象,为了将它里面的计算属性与组件本身的局部计算属性组合起来，需要用到对象扩展运算符。
computed: {
localState () {
…mapState ({

})

}
}
1.2.3getters
getters可以看作是store的计算属性，其参数为state。
const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: ‘reading’, done: true},
{id: 2, text: ‘playBastketball’, done: false}
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done);
}
}
});
1.2.3.1获取getters中的状态（方法一）
store.getters.doneTodos // [{ id: 1, text: ‘reading’, done: true }]
//在组件中，则要写在计算属性中，
computed: {
doneTodos () {
return this.KaTeX parse error: Expected 'EOF', got '}' at position 28: …s.doneTodos; }̲ } 获取getters中的状…store.commit(‘increment’);
}
}
使用mapMutaions(用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用)
import { mapMutaions } from ‘vuex’;
export default {
// …
methods: {
…mapMutaions([
‘increment’ // 映射 this.increment() 为 this.$store.commit{(}^{\prime }incremen{t}^{\prime })]),...mapMutaions([add{:}^{\prime }incremen{t}^{\prime }//映射this.add()为this.$store.commit(‘increment’)
])
}
}

// 因为mutation相当于一个method，所以在组件中，可以这样来使用
<button @click=“increment”>+
1.2.5 actions(actions就是为了异步操作而设置)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state){
state.count++;
}
},
actions: {
increment(context){
context.commit(‘increment’);
}
/* 可以用参数结构的方法来写action
increment({commit}){
commit(‘increment’);
}
*/
}
});

// action函数接受一个context参数，这个context具有与store实例相同的方法和属性。

// 分发action
store.dispatch(‘increment’);
1.2.5.1在组件中分发actions
在组件的methods中，使用this.$store.dispatch(‘’)。
使用mapActions，跟mapMutations是类似的。
1.2.6mudules
module是为了将store拆分后的一个个小模块,方便管理。
每个module拥有自己的state, getters, mutation, action