前言
在平時的前端開發中，我們更多的是完成螺絲釘的角色，即在公司的前端架構下，實作各種業務邏輯，Vue技術棧并不是難點所在，難點往往在于從 0 到 1 搭建一個完整的實踐項目，以及項目開發過程中對于很多技術細節的再學習和處理，幫助讀者具備開發和統籌一個完整項目的能力是此項目的目标，本項目将通過技術棧的詳細講解、多個功能子產品的開發實踐、并結合實際項目開發中的産品流程來完成這個任務。
技術棧
- vue
- vue-cli 4.0.5
- router
- vuex
- vant 2.10.2
- 阿裡圖示字型
- axios
基礎環境搭建
vue-cli 腳手架初始化
首先通過 vue-cli 這個腳手架工具生成項目的初始化化結構。
vue create dou-yin
複制
你會被提示選取一個 preset。這個地方我們選擇“手動選擇特性”來選取需要的特性。(這個地方會詳細介紹)
- Use history mode for router (這個地方我們選擇history的路由方式，history 方式的路徑後不會添加#)
- Pick a CSS pre-processor （因為項目中Less編寫樣式 是以需要css 預處理）
- Pick a linter/formatter config (項目中使用ESLint 代碼風格檢查，另外我們也希望可以通過額外的配置檔案對 eslint做定制化配置 我們選擇代碼儲存的時候做ESLint檢查)
- Save this as a preset for future projects (這個地方我們選擇n 我們不需要vue-cli儲存我們的噢诶這檔案)
項目建立成功，根據提示：
$ cd dou-yin
複制
啟動項目
$ yarn serve
複制
項目目錄說明
|- assets // 資源檔案夾
|--- fonts // 圖示字型 阿裡圖示字型
|--- icons // 項目圖示
|--- style // 封裝的公共樣式 一像素邊框
|- componments // 封裝的元件檔案夾
|- request // axios 網絡請求封裝
|- router // 路由
|- store // vuex
|- styles // 公共樣式檔案夾
|- utils // 工具類
|- views // 視圖頁面
main.js //vue項目入口
App.vue //跟頁面
.eslint.js // eslint配置檔案
babel.config.js // 解析babel的配置檔案
複制
引入第三方UI元件庫
市面上有很多優秀的vue移動端UI元件庫，cube-ui、vant 之類的，本人比較推薦vant(其實也沒什麼原因 就是用的比較順手而已)。
- 在項目内 安裝vant
yarn add vant babel-plugin-import style-resources-loader postcss-pxtorem
yarn add postcss-px2rem -D
複制
- 采用按需引入的方式 配置元件的引入
babel.config.js 修改成如下内容
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
};
複制
在項目中引入Vant元件 通過如下方式
import {Button} from 'vant'
複制
- 移動端自适應(Rem 适配)
postcss-pxtorem 是一款postcss插件，用于将px轉換成rem。
lib-flexible 用于設定rem基準值
在項目中 建立 postcss.config.js 内容如下
module.exports = {
plugins: {
autoprefixer: {
browsers: [
'Android >= 4.0',
'iOS >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: [
'*'
]
},
'postcss-px2rem': {
remUnit: 37.5
}
}
}
複制
如上的配置 是按照UI設計搞 750* 1334 配置的 (如果是其它尺寸的設計搞則改成 對應的即可)
配置 webpack
再項目中間建立 vue.config.js,内容如下
console.log(process.env.NODE_ENV)
const port = process.env.port || 10086;
const path = require('path');
function resolve(dir) {
// __dirname:項目的路徑
return path.join(__dirname, dir);
}
module.exports = {
outputDir: process.env.NODE_ENV === 'production' ? 'dist': 'ych5' ,
productionSourceMap: false, // 生産環境是否 生成SourceMap
devServer: {
port,
// 啟動之後 自動打開浏覽器
open: true,
// 報錯的時候全屏顯示錯誤
overlay: {
warnings: false,
errors: true
},
// host:'0.0.0.0',
// hot: true,
// hotOnly: false,
// https: false,
//代理
proxy: {
'/api': {
target: 'http://192.168.43.154:8080',
ws: true,
changeOrigin: true
},
}
},
css: {
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
'store': resolve('src/store'),
'views': resolve('src/views'),
'api': resolve('src/api'),
'components': resolve('src/components'),
'utils': resolve('src/utils'),
'styles': resolve('src/styles'),
}
}
},
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
}
// 全局樣式 變量、函數
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
resolve('src/styles/variables.less'),
resolve('src/styles/mixin.less'),
],
})
}
複制代碼 複制
建立 .env、.env.development、.env.production檔案
.env
NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"
複制
.env.development
VUE_APP_ERUDA=true
NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"
複制
.env.production
NODE_ENV="production";
BASE_URL='/'
VUE_APP_BASE_API="/prod-api"
複制
引入移動端調試神器 eruda
<% if (VUE_APP_ERUDA === 'true') { %>
<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js">script>
<script> window.eruda.init(); script>
<% } %>
複制代碼 複制
總結
通過如上配置 則完成了 vue移動端項目基礎機構搭建。 如截圖
iphon6 螢幕
iphone plus 螢幕
Eruda
下一章 繼續完成 項目基本骨架
- 截圖