項(xiàng)目說(shuō)明
本項(xiàng)目需要再PC端和移動(dòng)端分別進(jìn)行展示攀细，因?yàn)槠髽I(yè)站功能不是很復(fù)雜，所以將PC端和移動(dòng)端放在一個(gè)vue工程中進(jìn)行開(kāi)發(fā)和打包爱态。（注意：如果項(xiàng)目功能點(diǎn)多且交互復(fù)雜谭贪，建議將pc端和移動(dòng)端分為兩個(gè)工程進(jìn)行開(kāi)發(fā)和打包，尤其是pc端和移動(dòng)端要分別引入不同UI框架的時(shí)候锦担。）
技術(shù)概括
Vue2.x俭识、CLI4、webpack洞渔、npm（cnpm）套媚、node環(huán)境（10+）理盆、vue-router、axios（自行封裝）凑阶、scss、animation.js衷快、VantUI（移動(dòng)端ui框架）宙橱、postcss-plugin-px2rem（px轉(zhuǎn)rem）、lib-flexible（移動(dòng)端適配依賴包）蘸拔、iconfont（阿里矢量圖標(biāo)）
環(huán)境搭建
首先要確保電腦里已經(jīng)存在vue的開(kāi)發(fā)環(huán)境（如：node师郑，npm，webapck调窍，vue-cli）宝冕，如果不知道vue基礎(chǔ)開(kāi)發(fā)環(huán)境搭建，可參考我之前寫過(guò)的一篇文章axios在Vue-cli+webpack環(huán)境中的使用（掃盲篇）邓萨，這里面有非常詳盡的介紹地梨。
1. Vue-CLI4的安裝
本項(xiàng)目采用最新版本vue腳手架進(jìn)行環(huán)境搭建（CLI4），因?yàn)槲抑白龅膙ue項(xiàng)目都是使用CLI2版本的腳手架進(jìn)行環(huán)境搭建的缔恳，所以要使用CLI4就必須卸載CLI2宝剖，下面我們需要再git bash或windows cmd命令行中輸入如下命令進(jìn)行卸載：
cnpm uninstall vue-cli -g
成功卸載之后，就可以安裝CLI4了歉甚，安裝命令如下：
npm install -g @vue/cli //vue-cli2.x的安裝命令是 cnpm install -g vue-cli
安裝好了以后我們可以輸入如下命令進(jìn)行校驗(yàn)万细，看是否成功安裝了
vue -V
如下圖所示，表示安裝成功了
由于CLI4創(chuàng)建項(xiàng)目的命令是vue create XXX纸泄，而CLI2創(chuàng)建項(xiàng)目的命令是vue init XXX赖钞；CLI4和舊版使用了相同的 vue 命令，所以CLI2被覆蓋了聘裁。因?yàn)槲抑暗捻?xiàng)目使用CLI2搭建的雪营，還要進(jìn)行維護(hù)，所以這里可以全局安裝一個(gè)橋接工具咧虎，安裝命令如下：
npm install -g @vue/cli-init
//安裝完后 就還可以使用 vue init 命令初始化項(xiàng)目模板了卓缰，注意次項(xiàng)目為CLI2腳手架
2. 項(xiàng)目創(chuàng)建
安裝好了CLI4之后，我們就可以在指定的目錄中創(chuàng)建項(xiàng)目了砰诵，命令行進(jìn)入到指定目錄中征唬，然后輸入如下命令創(chuàng)建項(xiàng)目：
vue create my-project
通過(guò)上下箭頭按鍵選擇第二個(gè)選項(xiàng)（手動(dòng)選擇特性）
根據(jù)項(xiàng)目需求選擇配置如下圖：
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 茁彭。
Vuex 支持 vuex 总寒。
CSS Pre-processors 支持 CSS 預(yù)處理器。
Linter / Formatter 支持代碼風(fēng)格檢查和格式化理肺。
Unit Testing 支持單元測(cè)試摄闸。
E2E Testing 支持 E2E 測(cè)試善镰。
注意，空格鍵是選中與取消年枕，A鍵是全選 炫欺，選擇完成后按回車
選擇路由模式（hash或history）
選擇css預(yù)處理方式，這里我選擇的第二個(gè)選項(xiàng)
選擇ESLint代碼檢查方式熏兄，我選擇的是第一個(gè)品洛，只要代碼不符合ESLint規(guī)范就報(bào)錯(cuò)并阻止運(yùn)行。這里我想說(shuō)的是摩桶，因?yàn)楸救司幊瘫容^奔放桥状，代碼向來(lái)都是洋洋灑灑，實(shí)在適應(yīng)不了那些條條框框硝清，寫完代碼之后都是用編譯器進(jìn)行格式化的辅斟，安裝ESLint也是預(yù)留給習(xí)慣使用的程序猿用的。
選擇保存是進(jìn)行代碼檢查
將eslint和babel放在單獨(dú)文件進(jìn)行配置還是在packet.json文件中進(jìn)行配置芦拿，這里我選的是第一個(gè)
是否要保留以上配置作為以后項(xiàng)目的常用配置士飒，我選的是不保存
這些選項(xiàng)配置好了就可以等待項(xiàng)目安裝了
在控制臺(tái)輸入如下命令啟動(dòng)項(xiàng)目：
cd my-project // 進(jìn)入到項(xiàng)目根目錄
npm run serve // 啟動(dòng)項(xiàng)目
在瀏覽器中訪問(wèn)http://localhost:8080/index#/
3. 依賴包的安裝
在控制臺(tái)中安裝css-loader，style-loader（用于解析阿里iconfont圖標(biāo)）蔗崎，vant变汪，animation，axios
安裝css-loader和style-loader：
cnpm install css-loader --save-dev
cnpm install style-loader --save-dev
安裝vant：
cnpm install vant --save
在main.js中引入vant蚁趁，添加如下代碼：
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
安裝animation
cnpm install animate.css --save
在main.js中添加如下代碼：
import animate from 'animate.css'
安裝axios
cnpm install axios --save
在main.js中添加如下代碼：
import axios from 'axios'
Vue.prototype.axios=axios
iconfont矢量圖引入：
在阿里矢量圖標(biāo)官網(wǎng)上選擇需要用到的圖標(biāo)裙盾，然后下載到本地，解壓縮之后將如下文件進(jìn)行復(fù)制他嫡，并在public文件夾中創(chuàng)建iconfont文件夾番官，把這些文件粘貼到里面
在main.js中添加如下代碼
import '../public/iconfont/iconfont.css';
安裝postcss-plugin-px2rem和lib-flexible插件，postcss-plugin-px2rem用于將移動(dòng)端px單位自動(dòng)轉(zhuǎn)換成rem單位钢属，lib-flexible可以實(shí)現(xiàn)移動(dòng)端多種屏幕自適應(yīng)徘熔；其中px自動(dòng)轉(zhuǎn)rem的插件網(wǎng)上有許多，比如postcss-pxtorem淆党，postcss-px2rem酷师，postcss-pxtorem-exclude（exclude屬性不好用，有可能是我配置有問(wèn)題染乌，至今沒(méi)找到原因）等山孔，通過(guò)多次實(shí)踐對(duì)比，我還是推薦使用postcss-plugin-px2rem荷憋，這個(gè)插件配置選項(xiàng)上有exclude屬性台颠，它可以配置是否對(duì)某個(gè)文件夾下的所有css文件不進(jìn)行從px到rem的轉(zhuǎn)換，所以我們可以利用這個(gè)特性勒庄，把項(xiàng)目中的node_module文件夾排除掉串前。這樣如果我們項(xiàng)目中是用了瘫里，前端UI框架的話，就不會(huì)吧UI框架（如：Element等）中的 px單位轉(zhuǎn)換成rem了荡碾，也可以自行通過(guò)正則進(jìn)行匹配谨读。安裝命令如下：
cnpm install postcss-plugin-px2rem --save-dev
在main.js中添加如下代碼：
import 'lib-flexible';
下面我們來(lái)看一下目前為止main.js中的完整代碼：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'lib-flexible';
import '../public/iconfont/iconfont.css';
import animate from 'animate.css'
import Vant from 'vant';
import 'vant/lib/index.css';
import axios from 'axios';
Vue.prototype.axios=axios;
Vue.config.productionTip = false;
Vue.use(Vant);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
安裝好了之后，我們需要進(jìn)行插件的配置坛吁，有別于cli2的配置目錄結(jié)構(gòu)漆腌，cli4的配置需要在項(xiàng)目根目錄中創(chuàng)建vue.config.js文件，然后在里面進(jìn)行項(xiàng)目的各種配置阶冈，下面是我配置好的postcss-plugin-px2rem，接口代理塑径，eslint配置項(xiàng)女坑，如下：
// vue.config.js
module.exports = {
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時(shí)候檢查
lintOnSave: false,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 37.5, //換算基數(shù)， 默認(rèn)100 统舀，這樣的話把根標(biāo)簽的字體規(guī)定為1rem為50px,這樣就可以從設(shè)計(jì)稿上量出多少個(gè)px直接在代碼中寫多上px了匆骗。
// unitPrecision: 5, //允許REM單位增長(zhǎng)到的十進(jìn)制數(shù)字。
//propWhiteList: [], //默認(rèn)值是一個(gè)空數(shù)組誉简，這意味著禁用白名單并啟用所有屬性碉就。
// propBlackList: [], //黑名單
exclude: /(page_pc)/i, //默認(rèn)false，可以（reg）利用正則表達(dá)式排除某些文件夾的方法闷串，例如/(node_module)/ 瓮钥。如果想把前端UI框架內(nèi)的px也轉(zhuǎn)換成rem，請(qǐng)把此屬性設(shè)為默認(rèn)值
// selectorBlackList: [], //要忽略并保留為px的選擇器
// ignoreIdentifier: false, //（boolean/string）忽略單個(gè)屬性的方法烹吵，啟用ignoreidentifier后碉熄，replace將自動(dòng)設(shè)置為true。
// replace: true, // （布爾值）替換包含REM的規(guī)則肋拔，而不是添加回退锈津。
mediaQuery: false, //（布爾值）允許在媒體查詢中轉(zhuǎn)換px。
minPixelValue: 3 //設(shè)置要替換的最小像素值(3px會(huì)被轉(zhuǎn)rem)凉蜂。 默認(rèn) 0
}),
]
}
}
},
// 基本路徑
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/smile-client/',
devServer: {
host: 'localhost',
port: 8080,
open: true,
hotOnly: true, // 熱更新
proxy: {
'/smile-client': { // 本地mock服務(wù)器
target: 'http://192.168.1.17:8888',
changeOrigin: true,
ws: false,
pathRewrite:{
'^/smile-client':'' //這里理解成用‘/smile-client'代替target里面的地址琼梆，后面組件中我們調(diào)接口時(shí)直接用api代替 比如我要調(diào)用'http://codetpx.lncwkj.com/xxx/duty?age=30'，可在axios的url中直接寫‘smile-client/xxx/duty?age=30'即可
}
}
} // 設(shè)置代理
},
}
4. 項(xiàng)目開(kāi)發(fā)
以上這些環(huán)境搭建好了之后窿吩，我們就可以開(kāi)發(fā)項(xiàng)目了茎杂，首先我們要判斷瀏覽器是pc端還是移動(dòng)端環(huán)境，然后跳轉(zhuǎn)不同的路由來(lái)實(shí)現(xiàn)加載不同的頁(yè)面纫雁，項(xiàng)目src目錄結(jié)構(gòu)如下：
page_m用于存放移動(dòng)端代碼
page_pc用于存放pc端代碼
router里用于配置路由
tools文件用于存放自己的工具類
store用于存放vuex
components用于存放公共組件
assets用于存放自己的項(xiàng)目靜態(tài)資源（非第三方引入）
App.vue代碼如下（寫入判斷pc端還是移動(dòng)端蛉顽，然后根據(jù)情況跳轉(zhuǎn)路由）：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
methods:{
_isMobile() {
//判斷當(dāng)前環(huán)境是pc端還是移動(dòng)端
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag;
}
},
mounted(){
if (this._isMobile()) {
alert("手機(jī)端");
this.$router.replace('/home1');
} else {
alert("pc端");
this.$router.replace('/about');
}
}
}
</script>
<style lang="scss">
html{
margin: 0px;
padding: 0px;
}
body{
margin: 0px;
padding: 0px;
}
</style>
router/index.js路由配置如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../page_m/Home.vue'
import About from '../page_pc/About.vue'
//const originalPush = VueRouter.prototype.push;
//VueRouter.prototype.push = function push(location) {
// return originalPush.call(this, location).catch(err => err);
//};
Vue.use(VueRouter)
const routes = [
{
path: '',
redirect: '/home1'
},
{
path: '/home1',
name: 'home1',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
]
const router = new VueRouter({
routes
})
export default router
tools/service.js用于封裝axios，其中需要安裝qs先较，cnpm install qs --save携冤，代碼如下：
import axios from 'axios' //引入axios
import qs from 'qs'
import Vue from 'vue'
import router from '../router'
let baseURL=process.env.BASE_URL.toString();//獲取配置好的基礎(chǔ)路徑悼粮，直接使用process.env.API_BASE并不是字符串，所以這里要轉(zhuǎn)換
axios.defaults.baseURL = baseURL;//baseURL用于自動(dòng)切換本地環(huán)境接口和生產(chǎn)環(huán)境接口
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.withCredentials = true;
//封裝axios,用于異步操作的同步寫法曾棕，與async結(jié)合使用
const api={
get(url,data){
//get接口封裝
return new Promise((resolve,reject)=>{
axios.get(url,{params:data}).then((res)=>{
resolve(res)
}).catch((err)=>{
reject(err);
})
})
},
post(url,data){
//post接口封裝
return new Promise((resolve,reject)=>{
axios.post(url,qs.stringify(data)).then((res)=>{
resolve(res)
}).catch((err)=>{
reject(err);
})
})
},
filePost(url,data){
//文件上傳接口封裝
return new Promise((resolve,reject)=>{
axios.post(url,data).then((res)=>{
resolve(res)
}).catch((err)=>{
reject(err);
})
})
}
}
export {api,axios}
Home.vue含有annimte.css怎樣與vue聯(lián)合使用示例扣猫、vant組件引入示例，scss使用示例翘地，axios封裝后接口調(diào)用示例申尤，代碼如下：
<template>
<div class="home">
<van-button type="primary" size="normal" @click="handleClick">普通按鈕</van-button>
<transition enter-active-class="animated" leave-active-class="animated hinge">
<img alt="Vue logo" src="../assets/logo.png" v-show="showFlag">
</transition>
<div class="icon-box">
<div class="iconfont icon-home"></div>
</div>
<van-button type="warning">警告按鈕</van-button>
<van-button type="danger">危險(xiǎn)按鈕</van-button>
</div>
</template>
<script>
import qs from 'qs'
import { api, axios } from "../tools/service.js" //封裝axios方法
export default {
name: 'home',
data(){
return {
showFlag:true,
}
},
methods:{
handleClick(){
this.showFlag=!this.showFlag;
//獲取所有員工列表
api.get('user/deparyment/edit/getDeparymentList').then((res) => {
console.log(res);
}).catch((res) => {
})
}
},
mounted(){
}
}
</script>
<style lang="scss" scoped>
.icon-box{
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
border: solid 1px #333;
.icon-home{
font-size: 30px;
}
}
</style>
About.vue代碼如下：
<template>
<div class="header">
<div class="nav"></div>
</div>
</template>
<script>
</script>
<style lang="scss" scoped>
.header{
.nav{
width: 1360px;
height: 50px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
}
</style>
結(jié)語(yǔ)
以上就是個(gè)人對(duì)于Vue-CLI4環(huán)境搭建的一點(diǎn)心得，文章有疑問(wèn)或錯(cuò)誤的地方還請(qǐng)指出衙耕，感謝閱讀昧穿。
