关于如何创建一个vue cli3+的项目就再赘述
首先安装vant
npm i vant -S
看官方文档，vant框架提供了多种引入方式，此处我们用vant推荐的方式，自动按需引入组件
首先安装一个插件[babel-plugin-import]（babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
）
npm i babel-plugin-import -D
安装成功之后，在babel.config.js中进行如下配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
配置好之后，需要在index.html文件中去移入vant的样式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"/>
此时vant就算是配置成功了，如果要用vant 的组件，可以在当前页面去引入使用，或者在main中去引入，即可在页面中直接使用（小提示：引入babel-plugin-import插件之后,将不允许"导入所有组件"这种配置方式）
举个栗子（在main,js中去引入）：
import { Lazyload } from 'vant';
Vue.use(Lazyload );
在页面中引入:
<script>
import {Lazyload } from 'vant';
export default {
data() {
return {
}
},
components: {
[Lazyload .name]: Grid,
},
}
</script>
在移动端中，如何做显示适配，相信都有所了解，此处还是安装vant推荐的两个rem适配工具（Vant 中的样式默认使用px作为单位）
- [postcss-pxtorem] 是一款 postcss 插件，用于将单位转化为 rem
- [lib-flexible] 用于设置 rem 基准值
npm install postcss-pxtorem lib-flexible -D
等待一段时间，安装好之后在postcss.config中做如下配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,//rem是根据根元素字体大小进行适配(根据设计稿来改变大小，现在设计稿通常是750，那值改成75就可以了)
propList: ['*']
}
}
};
另外需要在main.js去引入工具
import "lib-flexible/flexible";
在项目根目录下创建vue.config.js文件
module.exports = {
lintOnSave: false,//过滤掉eslink，不过你自觉代码严谨可以忽略这个步骤（也就是所谓的严格模式）
};
移动端还需要处理的一个问题，有30毫秒点击延迟，解决方法如下(同时也解决了在ios中，input需要双击和长按才能获取焦点的问题)
npm install fastclick -D
安装成功之后，在main.js中去引入
import FastClick from 'fastclick';
const ver=str.match(/cpu iphone os (.*?) like mac os/);
if(!ver){//非IOS系统
// 引入fastclick 做相关处理
FastClick.attach(document.body);
}
else {
if(parseInt(ver[1])< 11){
// 引入fastclick 做相关处理
FastClick.attach(document.body);
}
}
有时候同时操作多项目，需要更改端口号，所以需要去配置一些环境变量
根目录下创建.env(放置通用环境变量的配置)
会自动读取这些文件
NODE_ENV = "development";
BASE_URL = "./"; //请求的基本的url，请求的通用的地址
VUE_APP_BASE_API = "/dev-api"; //开发请求的接口
根目录下创建.env.development(放置开发环境变量的配置)
NODE_ENV = "development";
BASE_URL = "./";//请求的基本的url，请求的通用的地址
VUE_APP_BASE_API = "/dev-api";//开发请求的接口
根目录下创建.env.prodcution(放置生产环境变量的配置)
NODE_ENV = "production";
BASE_URL = "./";
VUE_APP_BASE_API = "/prod-api";//生产请求的接口
配置好之后，在vue.config.js中配置
console.log(process.env.NODE_ENV); // 可以查看当前环境变量
const port = process.env.port || 9090; //配置端口号
const path = require('path');//找到路径
// const webpack = require('webpack')
function resolve(dir) {
return path.join(__dirname,dir);
}
module.exports = {
lintOnSave: false,
// lintOnSave:process.env.NODE_ENV === "development",(项目中一般如此配置，当然此处不希望她检测就直接关闭)
devServer:{
port, //端口号就是自己设置的值
open:true, //默认运行就打开页面
overlay:{ //报错全屏显示
warnings:false,//警告不需要提示
errors:true
},
proxy:{ // 跨域
[process.env.VUE_APP_BASE_API]:{ //通用的去获取接口
target:'http://xxx.cn',
changeOrigin:true,//是否更改请求中的host值，决定是否能跨域
pathRewrite:{ //重写路径
[process.env.VUE_APP_BASE_API]:""
}
}
}
},
configureWebpack:{
name:"project", //配置名称
resolve:{
alias:{
'@':resolve('src'),//用@直接查找到src,下方同理
'views':resolve('src/views'),//封装的方法，在上方
'components':resolve('src/components'),
'utils':resolve('src/utils'),
'style':resolve('src/style'),
'assets':resolve('src/assets')
}
},
},
pluginOptions: {//配置icon
// ...
pwa: {
iconPaths: {
favicon32: './favicon.ico',
favicon16: './favicon.ico',
appleTouchIcon: './favicon.ico',
maskIcon: './favicon.ico',
msTileImage: './favicon.ico'
}
}
}
};
在项目开发完成之后，我们可能不再需要console.log，此时可以用一个插件来实现这个想法
npm install babel-plugin-transform-remove-console --save-dev
babel.config.js
//此处是安装了vant
const plugins = [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
];
if (process.env.NODE_ENV === 'production') {
plugins.push("transform-remove-console")
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: plugins
}
在实际开发中，我们需要对接很多的接口，此时统一管理接口，是最好的，防止后端调整方法，我们还得去页面找
首先在src下创建一个api文件夹，新建一个api.js
api.js
import index from './api.js'
import login from './login.js'
export default{
index,
login,
home,
user,
}
index.js
export default {
index:"http://xxx.cn/",//接口地址存放在此
}
home.js
export default {
uploadone:"index/upload/uploadone",//图片上传接口
}
同时在可以单独建立一个http.js防止axios的封装和拦截器，这个网上多的是，就不再赘述，此处为不封装时，就放在main.js中加入一句话
axios.defaults.baseURL = "http://xxx.cn/";//接口地址
此时在页面调用接口就是
xxx.vue
let data = {
xxx:xxx//你需要向后端发送的键值对
};
this.$axios.post(this.$api.home.uploadone, this.$Qs.stringify(data),)//qs需要在main.js去引入
.then((res) => {
console.log(res);
if (res.data.code) {//请求成功时
//你的逻辑
} else {//请求失败时
this.$toast(res.data.msg)//打印后端提供的错误信息 toast是vue的一个轻提示，可在main中全局引入
}
}).catch((err) => {
console.log(err);
});
另外说一下路由守卫，在router的index.js中去配置
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'login',
redirect: '/login'//设置首页
},
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "Article" */
'views/login.vue'),
meta: {
requireAuth: false,//这个是路由拦截的一个标志，符合一定条件开放路由，此处false是不验证路由
title: '授权绑定'
}
},
{
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: "Article" */
'views/Home/Home.vue'),
meta: {
requireAuth: true,//相对的，true就是不开放路由，没满足条件不能跳转
title: '个人中心'
}
},
{
path: '*',
name: '404',//设置404页面，出现某些未知错误时候，可以跳转到这个页面，避免出现一些奇怪的bug。影响用户体验
component: () => import(/* webpackChunkName: "404" */
'views/404.vue'),
meta: {
requireAuth: true
}
},
];
const router = new VueRouter({
mode: 'hash',//因项目需要，此处采用hash模式
routes
});
// 路由守卫
router.beforeEach((to, from, next) => {
let getFlag = Boolean(localStorage.getItem("token"));从缓存中取到token
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (getFlag === true) { // 通过vuex state获取当前的token是否存在
// console.log('进了登录方法');
if(to.name == 'home' ){//因项目需要，某些页面设置不同的背景色
window.document.body.style.backgroundColor = '#f7f7f7';
}else {
window.document.body.style.backgroundColor = '';
}
if(to.meta.title){//设置单独某页面的title
document.title = to.meta.title;
}else {
document.title = '阿米尔'
}
next();
}
else {
// this.$toast('登录失败');
console.log('应该路由拦截了');
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
})
}
}
else {
next();
}
});
export default router
网友评论