项目工程基架
<ol>
<li>搭建脚手架：
<code>vue init webpack demo</code></li>
<li>安装stylus依赖：
<code>yarn add stylus style-loader stylus-loader --s</code></li>
<li>工程目录：
<pre><code>src>
api> //接口目录，数据请求方法、api
axios.js
index.js
assets> //静态资源目录，字体、图片、公共样式
fonts
images
styles
components //公共组件目录
pages //视图页面目录
router> //路由目录
index.js
store> //数据管理仓库，数据状态、方法
index.js
App.vue//根组件，公共样式、视图
main.js//根实例</code></pre></li>
<li>
<p>依赖封装：</p>
<p>4.1. axios.js:</p>
<pre><code>import axios from 'axios'
import qs from 'qs'// post参数序列化插件
axios.defaults.baseURL = 'http://127.0.0.1:9000'
axios.defaults.withCredentials = false// 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest = data => qs.stringify(data)//序列化参数
axios.interceptors.response.use(response => {//响应拦截器
return response.data
})
export default axios</code></pre>
<p>4.1. api>index.js:</p>
<pre><code>import axios from './axios'
const api = {
hotList () {
return axios.get('/hotList')
}
}
export default api
</code></pre>
<p>4.2. router>index.js:</p>
<pre><code>import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
mode: 'hash',//hash路由
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '*',
redirect: '/'//重定向
}
]
})
</code></pre>
<p>4.3. store>index.js:</p>
<pre><code>import Vue from 'vue'
import Vuex from 'vuex'
import logger from 'vuex/dist/logger' //日志
// import api from '../api'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//数据
},
mutations: {
//方法
},
actions: {
},
plugins: [logger()]
})</code></pre>
</li>
</ol>