一甥啄、安裝Vue腳手架：
安裝vue-cli
npm install -g vue-cli
建立項(xiàng)目名
打開文件所在目錄，在安裝位置打開cmd
vue init webpack 文件名
初始化：
cd 文件名 跳轉(zhuǎn)到文件目錄下
npm install
npm run dev
打開瀏覽器：localhost:8080 即可打開項(xiàng)目
打包文件 :
npm run build
瀏覽器打開 dist中的index.html
修改config中index.js '/' => './'
npm run build
二炬搭、Vuex的使用
安裝Vuex
cd 項(xiàng)目
npm install vuex --save
1> . store/store.js 中：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
})
export default store
2>. main.js ------方法及數(shù)據(jù)
import store from './store/store.js'
new Vue({
store,
state:{
arr: [],
tabIndex: ''
},
mutations:{
getIndexs (state, value) {
state.tabIndex = value
}
},
actions: {
getIndexs2 (context, value) {
context.commit('getIndexs',value)
}
getters:{}
})
3> . App.vue ---------- 調(diào)用數(shù)值和方法
<template>
<ul>
<li v-for="(item, index) in sum" @click="getIndex(index)">{{item}}<li>
{{tabIndex_a}}
</ul>
</template>
<script>
import store from './store/store.js'
export default {
name: 'App',
store,
computed: {
sum () {
return this.$toute.state.arr
},
tabIndex_a (){
return this.$store.state.tabIndex; // 獲取公共的值
}
},
methods: {
getIndex (index) {
this.$toute.commit('getIndexs', index) // 調(diào)用公共事件
}
}
}
</script>
三蜈漓、scss
安裝：
npm install --save-dev sass-loader
npm install --save-dev node-sass //sass-loader依賴于node-sass
main.js 引用
import './components/css/common.scss'
四、axios
1宫盔、 安裝
npm install axios
npm install --save axios vue-axios
2融虽、main.js 中：
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3 、組件中（以json對(duì)象為例）：
import Axios from 'axios'
created() {
Axios.get("../../static/data.json").then((res) => {
console.log(res.data)
})
}
五灼芭、less用法
1有额、安裝：
npm install less less-loader --save-dev
2、修改：
build/webpack.base.conf.js 中彼绷，添加
module.exports = {
module: {
rules: [
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
}
3巍佑、使用
<style lang="less">
.box {
p {
color: red;
}
}
</style>
https://blog.csdn.net/zmhawk/article/details/75209161
4、公共less文件（vue組件里）
<style lang="less">
@import "../assets/css/detail.less";
</style>
less文件：
.box {
p {
font-size: 16px;
}
}
