前言
在平时的前端开发中，我们更多的是完成螺丝钉的角色，即在公司的前端框架下，实现各种业务逻辑，Vue技术栈并不是难点所在，难点往往在于从 0 到 1 搭建一个完整的实践项目，以及项目开发过程中对于很多技术细节的再学习和处理，帮助读者具备开发和统筹一个完整项目的能力是此项目的目标，本项目将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。
技术栈
- vue
- vue-cli 4.0.5
- router
- vuex
- vant 2.10.2
- 阿里图标字体
- axios
基础环境搭建
vue-cli 脚手架初始化
首先通过 vue-cli 这个脚手架工具生成项目的初始化化结构。
vue create dou-yin
复制
你会被提示选取一个 preset。这个地方我们选择“手动选择特性”来选取需要的特性。(这个地方会详细介绍)
- Use history mode for router (这个地方我们选择history的路由方式，history 方式的路径后不会添加#)
- Pick a CSS pre-processor （因为项目中Less编写样式 所以需要css 预处理）
- Pick a linter/formatter config (项目中使用ESLint 代码风格检查，另外我们也希望可以通过额外的配置文件对 eslint做定制化配置 我们选择代码保存的时候做ESLint检查)
- Save this as a preset for future projects (这个地方我们选择n 我们不需要vue-cli保存我们的噢诶这文件)
项目创建成功，根据提示：
$ cd dou-yin
复制
启动项目
$ yarn serve
复制
项目目录说明
|- assets // 资源文件夹
|--- fonts // 图标字体 阿里图标字体
|--- icons // 项目图标
|--- style // 封装的公共样式 一像素边框
|- componments // 封装的组件文件夹
|- request // axios 网络请求封装
|- router // 路由
|- store // vuex
|- styles // 公共样式文件夹
|- utils // 工具类
|- views // 视图页面
main.js //vue项目入口
App.vue //跟页面
.eslint.js // eslint配置文件
babel.config.js // 解析babel的配置文件
复制
引入第三方UI组件库
市面上有很多优秀的vue移动端UI组件库，cube-ui、vant 之类的，本人比较推荐vant(其实也没什么原因 就是用的比较顺手而已)。
- 在项目内 安装vant
yarn add vant babel-plugin-import style-resources-loader postcss-pxtorem
yarn add postcss-px2rem -D
复制
- 采用按需引入的方式 配置组件的引入
babel.config.js 修改成如下内容
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
],
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
};
复制
在项目中引入Vant组件 通过如下方式
import {Button} from 'vant'
复制
- 移动端自适应(Rem 适配)
postcss-pxtorem 是一款postcss插件，用于将px转换成rem。
lib-flexible 用于设置rem基准值
在项目中 新建 postcss.config.js 内容如下
module.exports = {
plugins: {
autoprefixer: {
browsers: [
'Android >= 4.0',
'iOS >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: [
'*'
]
},
'postcss-px2rem': {
remUnit: 37.5
}
}
}
复制
如上的配置 是按照UI设计搞 750* 1334 配置的 (如果是其它尺寸的设计搞则改成 对应的即可)
配置 webpack
再项目中间创建 vue.config.js,内容如下
console.log(process.env.NODE_ENV)
const port = process.env.port || 10086;
const path = require('path');
function resolve(dir) {
// __dirname:项目的路径
return path.join(__dirname, dir);
}
module.exports = {
outputDir: process.env.NODE_ENV === 'production' ? 'dist': 'ych5' ,
productionSourceMap: false, // 生产环境是否 生成SourceMap
devServer: {
port,
// 启动之后 自动打开浏览器
open: true,
// 报错的时候全屏显示错误
overlay: {
warnings: false,
errors: true
},
// host:'0.0.0.0',
// hot: true,
// hotOnly: false,
// https: false,
//代理
proxy: {
'/api': {
target: 'http://192.168.43.154:8080',
ws: true,
changeOrigin: true
},
}
},
css: {
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
'assets': resolve('src/assets'),
'store': resolve('src/store'),
'views': resolve('src/views'),
'api': resolve('src/api'),
'components': resolve('src/components'),
'utils': resolve('src/utils'),
'styles': resolve('src/styles'),
}
}
},
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
}
// 全局样式 变量、函数
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
resolve('src/styles/variables.less'),
resolve('src/styles/mixin.less'),
],
})
}
复制代码 复制
创建 .env、.env.development、.env.production文件
.env
NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"
复制
.env.development
VUE_APP_ERUDA=true
NODE_ENV="development";
BASE_URL='/'
VUE_APP_BASE_API="/dev-api"
复制
.env.production
NODE_ENV="production";
BASE_URL='/'
VUE_APP_BASE_API="/prod-api"
复制
引入移动端调试神器 eruda
<% if (VUE_APP_ERUDA === 'true') { %>
<script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js">script>
<script> window.eruda.init(); script>
<% } %>
复制代码 复制
总结
通过如上配置 则完成了 vue移动端项目基础机构搭建。 如截图
iphon6 屏幕
iphone plus 屏幕
Eruda
下一章 继续完成 项目基本骨架
- 截图