Vue2+VantUI移动端项目框架搭建
Vue2+VantUI移动端项目框架搭建
【准备】
装好vue和node环境
当前vue版本@vue/cli 5.0.8 npm@6.14.15 node v14.17.6
【步骤】
初始化项目
选择好项目根目录文件夹，在终端中用cd命令进入该目录，执行vue create 项目名称 ，下一步选择Manually select features，下一步勾选Router、VueX、CSS Pre-processors三项，下一步选择2.x，下一步输入n ，下一步选择Sass/SCSS (with dart-sass)，下一步选择In dedicated config files，下一步输入n，然后等待项目初始化完毕。
安装依赖
执行cd 项目名称 进入项目目录，分别执行npm i lib-flexible 和 npm i postcss-pxtorem。
配置文件和代码修改
①用代码编辑器打开项目，在根目录新建vue.config.js,放入以下代码:
const path = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = { // commonJS规范
publicPath: './',
outputDir: 'dist', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)
filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
// 代理服务
devServer: {
open: false, // 项目构建成功之后，自动弹出页面
hot: true, // 模块热更新
// host: '192.168.31.142', // 设置当前服务器地址
port: 9090, // 设置端口号
proxy: { // 开发环境下将 API 请求代理到 API 服务器
'/api': {
target: 'http://192.168.15.248:80/gbbjgl',
// ws: false,
changeOrigin: true,
pathRewrite: {
'^/api/': '/'
}
}
}
},
// 设置别名
chainWebpack: (config) => {
config.resolve.alias
.set("@", resolve("src"))
.set("@assets", resolve("src/assets"))
.set("@components", resolve("src/components"))
.set("@network", resolve("src/network"))
.set("@router", resolve("src/router"))
.set("@store", resolve("src/store"))
.set("@views", resolve("src/views"));
},
// 移动端适配
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require("autoprefixer")({
// 配置使用 autoprefixer
overrideBrowserslist: ["last 15 versions"],
}),
// 配置postcss-pxtorem
require('postcss-pxtorem')({
// 换算的基数
rootValue: 37.5,
// 忽略转换正则匹配项。插件会转化所有的样式的px。
// 比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
// 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
selectorBlackList: [".van"],
propList: ['*']
})
]
}
}
}
}
}
②找到public/index.html,用
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
替代
<meta name="viewport" content="width=device-width,initial-scale=1.0">
③在src/assets目录下新建文件夹css，在css中创建文件reset.css,放入以下代码：
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
/* font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */
}
body {
width: 100%;
height: 100vh;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
img {
border: 0;
}
a {
color: #707070;
text-decoration: none;
}
a, input, button, select, textarea {
outline: none;
}
④在main.js引入:
// 移动端适配库
import 'lib-flexible/flexible';
// 浏览器重置样式
import '@/assets/css/reset.css';
⑤在App.vue中删除<style>标签中原有的css，放入以下：
#app {
overflow-x: hidden;
overflow-y: auto;
width: 375px;
height: 100%;
margin: 0 auto;
font-size: 16px;
text-align: left;
color: #303133;
background-color: #f9fafb;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
启动项目
在终端执行npm run serve