vue-cli3构建H5移动应用（vant+rem）
安装 cli3.x 版本
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过以下命令卸载它。
npm uninstall vue-cli -g
或
yarn global remove vue-cli
然后可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
或
yarn global add @vue/cli
拉取 2.x 模板 (旧版本)
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
创建项目
vue create hello-world
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，
如果选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex）
也可以选 Manually select features“手动选择特性”来选取需要的特性.
下面是手动配置选项(空格键是选中和取消)
11.png
这样就会创建一个包含 vue-router、vuex 和 postcss 的项目
勾选之后，使用回车键进入下一步
22.png
这里需要选择路由模式，yes 是 history 模式，no 是 hash 模式，一般选用yes
后面还需要选择 ESLint 的校验规则，格式化的时机，和各个插件的配置项的位置，不熟悉的话就选第一个
下面这个选择了 In package.json
33.png
最后选择是否将配置项保存为预设，然后配置完成，开始生成项目.
进入项目 、启动项目
npm run serve
以下是安装vantui部分，非此ui框架可以结束了
安装vant-ui
1.安装
# 安装 1.x 稳定版本
npm i vant -S
2.采用方式一 自动按需引入组件 (推荐)
# 安装插件
npm i babel-plugin-import -D
3.其后在babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
4.接着你可以在代码中直接引入 Vant 组件
<template>
<div class="about">
<h1>This is an about page</h1>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
import {
Button
} from 'vant';
export default {
data() {
return {
}
},
components: {
[Button.name]: Button,
}
}
</script>
Rem 适配
Vant 中的样式默认使用
px作为单位，如果需要使用rem单位，推荐使用以下两个工具
- postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
- lib-flexible 用于设置 rem 基准值
1.下载lib-flexible
npm i lib-flexible --save
2.在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.安装 postcss-pxtorem
npm install postcss-pxtorem -D
4.在根目录下创建 vue.config.js配置postcss-pxtorem
module.exports = {
...
...
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5, // 换算的基数
selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ['*'],
}),
]
}
}
},
}
配置完成后，即可在开发中直接使用 px 单位开发
Vue-cli3.x-自定义基础配置
在项目根目录创建 vue.config.js
module.exports = {
publicPath:'/',//根路经 './'相对路径
outputDir:'dist',//构建输出目录
assetsDir:'assets',//静态资源目录（js,css,img,fonts）
lintOnSave: false,//是否开启eslint保存监测，有效值：true || false || 'error'
devServer:{
open:false, //项目运行起来自动打开浏览器
host:'0.0.0.0',//可选值 'localhost' || '127.0.0.1' || '0.0.0.0'( 本机ip)
port:8080,//端口号
https:false,// http://127.0.0.1:8081/ 与 https://127.0.0.1:8081/的区别
hotOnly:false, //热更新
proxy:{
//配置跨域
'/api':{
target:'http://locallhost:5000/api/',
ws:true,
changOrigin:true,
pathRewrite:{ //地址重写
'^/api':''
}
}
}
},
//...
}
Vue-cli3.x-全局变量
规则：
*文件中必须以VUE_APP_开头
*通过process.env.XXX来使用
*通过.env配置环境变量
*通过.env[mode]区别开发和生产环境
区别：
.env.development =======>开发环境
.env.production =======>生产环境
.env=========> 在所有的环境中被载入
1.在项目根目录创建 .env 和 .env.development 和 .env.production 文件
image.png
2.在其文件页面中可自定义变量，如图
VUE_APP_TITLE='我是全局title变量'
3.在.vue文件中读取全局变量
data() {
return {
title:process.env.VUE_APP_TITLE
}
},
安装HTTP 服务
主要用于访问Vue打包后的页面路径，如访问dist中的index.html页面
1.安装
npm install -g serve
2.查看serve版本
serve -v
3.启用服务，同时指定目录
serve -s dist/
红框中即是打包后的页面地址.png
