基于Vue2的移动端开发环境搭建详解

2020-06-16 06:05:13易采站长站整理

我们接下来介绍全家桶的安装(使用详情大家可以去初始页面的链接查看)

一句命令搞定全家桶


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';