一、安装Vue脚手架：
安装vue-cli
npm install -g vue-cli
建立项目名
打开文件所在目录，在安装位置打开cmd
vue init webpack 文件名
初始化：
cd 文件名 跳转到文件目录下
npm install
npm run dev
打开浏览器：localhost:8080 即可打开项目
打包文件 :
npm run build
浏览器打开 dist中的index.html
修改config中index.js '/' => './'
npm run build
二、Vuex的使用
安装Vuex
cd 项目
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 ------方法及数据
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 ---------- 调用数值和方法
<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) // 调用公共事件
}
}
}
</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对象为例）：
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;
}
}
