構建vue零散筆記

# vue項目(用webpack構建)的前提是已安裝了node.js,vue,vue-cli,webpack

# 主要命令
構建：vue init webpack 項目名（純英文，且不可駝峰）
運行：npm run dev
打包：npm run build(需要修改配置信息)

# element-ui
## 安裝：npm i element-ui -S
## 引用：在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
## 按需引入：
## 安裝 babel-plugin-component
npm install babel-plugin-component -D
## .babelrc 修改為
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
## 使用
import { Button, Select } from 'element-ui'
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);


# axios
## 安裝
npm install axios
## 使用 main.js里
import axios from 'axios'
Vue.prototype.$axios = axios
## 調用
this.$axios.(略)

# vuex
## 安裝
npm install vuex --save
## main.js里
import Vuex from 'vuex'
Vue.use(Vuex)
## 使用
參考騰訊視頻vue教程
mutations與actions 如果是靜態的全部變數用mutations即可，如果需要從介面獲取，則需用actions（未測試）
## 獲取變數
this.$store.state.變數名
## 修改變數
this.$store.commit('方法名')（可帶參數 mutations情況下）
his.$store.dispatch('方法名') (可帶參數 actions情況下)

# 激活狀態 路由配置里
linkActiveClass:'is-active'

# 路由跳轉
this.$router.push({name:'master',params:{id:'參數'}});
name和params搭配，刷新的話，參數會消失
this.$router.push({path:'/master',query:{id:'參數'}});
path和query搭配，刷新頁面的話，url中的參數不會丟失,query中的參數成了url中的一部分

<!-- 字元串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表達式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 帶查詢參數，下麵的結果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>


# 路由獲取參數
this.$route.query.參數名
this.$route.params.參數名
watch:{
'$route'(to,from){

}
}

# 路由鉤子
全局
router.beforeEach((to, from, next) => {
next()
})
局部
beforeRouteEnter:(to,from,next)=>{
return next()
}