项目说明
本项目需要再PC端和移动端分别进行展示，因为企业站功能不是很复杂，所以将PC端和移动端放在一个vue工程中进行开发和打包。（注意：如果项目功能点多且交互复杂，建议将pc端和移动端分为两个工程进行开发和打包，尤其是pc端和移动端要分别引入不同UI框架的时候。）
技术概括
Vue2.x、CLI4、webpack、npm（cnpm）、node环境（10+）、vue-router、axios（自行封装）、scss、animation.js、VantUI（移动端ui框架）、postcss-plugin-px2rem（px转rem）、lib-flexible（移动端适配依赖包）、iconfont（阿里矢量图标）
环境搭建
首先要确保电脑里已经存在vue的开发环境（如：node，npm，webapck，vue-cli），如果不知道vue基础开发环境搭建，可参考我之前写过的一篇文章axios在Vue-cli+webpack环境中的使用（扫盲篇），这里面有非常详尽的介绍。
1. Vue-CLI4的安装
本项目采用最新版本vue脚手架进行环境搭建（CLI4），因为我之前做的vue项目都是使用CLI2版本的脚手架进行环境搭建的，所以要使用CLI4就必须卸载CLI2，下面我们需要再git bash或windows cmd命令行中输入如下命令进行卸载：
cnpm uninstall vue-cli -g
成功卸载之后，就可以安装CLI4了，安装命令如下：
npm install -g @vue/cli //vue-cli2.x的安装命令是 cnpm install -g vue-cli
安装好了以后我们可以输入如下命令进行校验，看是否成功安装了
vue -V
如下图所示，表示安装成功了
安装成功.jpg
由于CLI4创建项目的命令是vue create XXX，而CLI2创建项目的命令是vue init XXX；CLI4和旧版使用了相同的 vue 命令，所以CLI2被覆盖了。因为我之前的项目使用CLI2搭建的，还要进行维护，所以这里可以全局安装一个桥接工具，安装命令如下：
npm install -g @vue/cli-init
//安装完后 就还可以使用 vue init 命令初始化项目模板了，注意次项目为CLI2脚手架
2. 项目创建
安装好了CLI4之后，我们就可以在指定的目录中创建项目了，命令行进入到指定目录中，然后输入如下命令创建项目：
vue create my-project
通过上下箭头按键选择第二个选项（手动选择特性）
创建项目.jpg
根据项目需求选择配置如下图：
配置选项.jpg
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
注意，空格键是选中与取消，A键是全选 ，选择完成后按回车
选择路由模式（hash或history）
路由模式.jpg
选择css预处理方式，这里我选择的第二个选项
css预处理.jpg
选择ESLint代码检查方式，我选择的是第一个，只要代码不符合ESLint规范就报错并阻止运行。这里我想说的是，因为本人编程比较奔放，代码向来都是洋洋洒洒，实在适应不了那些条条框框，写完代码之后都是用编译器进行格式化的，安装ESLint也是预留给习惯使用的程序猿用的。
eslint.jpg
选择保存是进行代码检查
save.jpg
将eslint和babel放在单独文件进行配置还是在packet.json文件中进行配置，这里我选的是第一个
配置.jpg
是否要保留以上配置作为以后项目的常用配置，我选的是不保存
保存配置.jpg
这些选项配置好了就可以等待项目安装了
成功安装.jpg
在控制台输入如下命令启动项目：
cd my-project // 进入到项目根目录
npm run serve // 启动项目
在浏览器中访问http://localhost:8080/index#/
success.jpg
3. 依赖包的安装
在控制台中安装css-loader，style-loader（用于解析阿里iconfont图标），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矢量图引入：
在阿里矢量图标官网上选择需要用到的图标，然后下载到本地，解压缩之后将如下文件进行复制，并在public文件夹中创建iconfont文件夹，把这些文件粘贴到里面
iconfont.png
目录.jpg
在main.js中添加如下代码
import '../public/iconfont/iconfont.css';
安装postcss-plugin-px2rem和lib-flexible插件，postcss-plugin-px2rem用于将移动端px单位自动转换成rem单位，lib-flexible可以实现移动端多种屏幕自适应；其中px自动转rem的插件网上有许多，比如postcss-pxtorem，postcss-px2rem，postcss-pxtorem-exclude（exclude属性不好用，有可能是我配置有问题，至今没找到原因）等，通过多次实践对比，我还是推荐使用postcss-plugin-px2rem，这个插件配置选项上有exclude属性，它可以配置是否对某个文件夹下的所有css文件不进行从px到rem的转换，所以我们可以利用这个特性，把项目中的node_module文件夹排除掉。这样如果我们项目中是用了，前端UI框架的话，就不会吧UI框架（如：Element等）中的 px单位转换成rem了，也可以自行通过正则进行匹配。安装命令如下：
cnpm install postcss-plugin-px2rem --save-dev
在main.js中添加如下代码：
import 'lib-flexible';
下面我们来看一下目前为止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')
安装好了之后，我们需要进行插件的配置，有别于cli2的配置目录结构，cli4的配置需要在项目根目录中创建vue.config.js文件，然后在里面进行项目的各种配置，下面是我配置好的postcss-plugin-px2rem，接口代理，eslint配置项，如下：
// vue.config.js
module.exports = {
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: false,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 37.5, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(page_pc)/i, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
},
// 基本路径
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/smile-client/',
devServer: {
host: 'localhost',
port: 8080,
open: true,
hotOnly: true, // 热更新
proxy: {
'/smile-client': { // 本地mock服务器
target: 'http://192.168.1.17:8888',
changeOrigin: true,
ws: false,
pathRewrite:{
'^/smile-client':'' //这里理解成用‘/smile-client'代替target里面的地址，后面组件中我们调接口时直接用api代替 比如我要调用'http://codetpx.lncwkj.com/xxx/duty?age=30'，可在axios的url中直接写‘smile-client/xxx/duty?age=30'即可
}
}
} // 设置代理
},
}
4. 项目开发
以上这些环境搭建好了之后，我们就可以开发项目了，首先我们要判断浏览器是pc端还是移动端环境，然后跳转不同的路由来实现加载不同的页面，项目src目录结构如下：
src目录结构.jpg
page_m用于存放移动端代码
page_pc用于存放pc端代码
router里用于配置路由
tools文件用于存放自己的工具类
store用于存放vuex
components用于存放公共组件
assets用于存放自己的项目静态资源（非第三方引入）
App.vue代码如下（写入判断pc端还是移动端，然后根据情况跳转路由）：
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
methods:{
_isMobile() {
//判断当前环境是pc端还是移动端
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("手机端");
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();//获取配置好的基础路径，直接使用process.env.API_BASE并不是字符串，所以这里要转换
axios.defaults.baseURL = baseURL;//baseURL用于自动切换本地环境接口和生产环境接口
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.withCredentials = true;
//封装axios,用于异步操作的同步写法，与async结合使用
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联合使用示例、vant组件引入示例，scss使用示例，axios封装后接口调用示例，代码如下：
<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">危险按钮</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>
结语
以上就是个人对于Vue-CLI4环境搭建的一点心得，文章有疑问或错误的地方还请指出，感谢阅读。
网友评论