2019最全 方糖全棧課·PHP+React大系教程
本文章,主要提供vue移動端專案基礎框架搭建思路,每個獨立的模組網上有很多相關的文件。
移動端vue專案基礎框架搭建,主要包括6個步驟
專案使用的腳手架vue-cli搭建模板,2、使用淘寶lib-flexible搭配rem實現頁面的自適應佈局,為了方便程式碼編寫使用rpx2rem轉化px,使用scss樣式預編譯器,4、介面封裝的aixos封裝請求,5、專案中使用vuex和vue-router(在搭建快速模板的時候,問你要不要路由你選個是,會自動生成路由模組),6、引入公用的字型檔案,這樣移動端的vue框架就基本滿足使用了,接下去ui的擴充套件和應用後續再說嘍
1、用腳手架vue-cli 3.0快速搭建模板(網上很多,也有很多教程,node,vue-cli該升級的早點升級)
我找了一個https://blog.csdn.net/weixin_43068247/article/details/82082006,文件後很多任意找一個都可以。。沒什麼好說的
//安裝腳手架
npm install -g @vue/cli
//快速安裝
vue create project-name
1
2
3
4
2、既然是移動端,那移動端的自適應,採用淘寶的lib-flexible的庫,下載依賴,
npm i lib-flexible -S
1
在專案的主檔案main.js中引入,並且在其中使用如下圖所示
//引入
import 'lib-flexible/flexible.js'
//使用
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
1
2
3
4
5
6
7
8
3、使用px2rem將px自動裝成rem單位,rem是什麼東東,自己百度嘍
//安裝
npm install px2rem-loader
1
2
vue中配置 在build下的 utils.js中,找到generateLoaders 方法,在這裡新增
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
4、scss預編譯器
//引入依賴
npm install sass-loader node-sass --save-dev
1
2
在build資料夾下的webpack.base.conf.js的rules裡面新增配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
1
2
3
4
新增後配置如下
在需要用到sass的地方新增lang=scss
5、封裝axios,這個就完全根據個人喜好來封裝,你是直接用還是封裝後引入使用還是封裝後全域性使用,看你自己的喜好,網上的資料比較較多,這裡就不介紹了。。
6、狀態管理器vuex使用請參保文件https://vuex.vuejs.org/zh/guide/,vue-router也是一樣,文件很清晰,使用也很方便
7,字型全域性引入
完成後,你就有一個基礎的移動端基礎的框架了,每個步驟的文件,網上文件很多,可以單獨檢視,本文提供一個整體的思路
---------------------
作者:陳小成
來源:CSDN
原文:https://blog.csdn.net/weixin_44330517/article/details/85542634
版權宣告:本文為博主原創文章,轉載請附上博文連結!