我们接下来介绍全家桶的安装(使用详情大家可以去初始页面的链接查看)
一句命令搞定全家桶
npm install vue-router vue-resource vuex --save
package.json 已经加入了我们的全家桶,node_modules 目录下也有对应的依赖包,注意这里现在还不能用扩展之后的方法,因为我们没引入到项目中来。src/main.js 修改如下
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Vuex from 'vuex'import App from './App.vue'
Vue.use(VueResource)
Vue.use(VueRouter)
Vue.use(Vuex)
new Vue({
el: '#app',
render: h => h(App)
})
这时我们的项目就能运行对应的扩展方法了
三、集成 Sass
作为移动端的开发怎么能缺少 css 预编译语言。sass 安装需要几个依赖。
我们干脆在
package.json 把版本写死,然后通过
npm install 安装在
"devDependencies": {} 中添加下面几个依赖
"node-sass": "^3.8.0",
"sass": "^0.5.0",
"sass-loader": "^4.0.0",好,我们
npm install 后,就可以正式使用 sass 啦四、目录结构建议
依赖的安装到这里差不多结束了,其它大家需要的可以自定义安装
下面给出我的目录建议供大家参考,

这里的 img 目录放置图片,script 目录放置公共的工具函数,style 目录放置我们的 sass 文件,
你查看 App.vue 文件时不难发现,默认的把样式文件给到了模块里,这样样式一直跟着模块
orange 建议大家不要这样做,因为这样十分不利于样式的模块化,注意区分与模版模块化的区别,
我们单独设置 style 目录,并在目录当中对 sass 进行模块化处理(通过 import 引入 sass 模块)
对应的 App.vue 也变得非常简洁,代码如下
<style lang="sass">
@import "/style/base.scss";
</style>五、rem 适配
对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现,下面给出一种方案
在 index.html 中添加如下代码
<script>
let html = document.documentElement; window.rem = html.getBoundingClientRect().width / 16 ;
html.style.fontSize = window.rem + 'px';










