如果想看该实战系列的其他内容,请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。
项目仓库地址,欢迎 Star
基础环境搭建
-
Vue-cli 脚手架搭建环境
vue create dou-yin-app
会提示让选取一个 preset,这个地方我们选择“Manually select features”来手动选取需要的特性;
然后 Check the features needed for your project: Babel、Router、Vuex、CSS Pre-processors、Linter;
具体配置见下图:
项目创建成功,进入项目:
cd dou-yin-app
启动项目:
yarn serve
-
引入其他内容
-
第三方UI组件库
本项目使用的是 Vant 组件库,具体使用方法见 Vant 组件库官网文档
vant 安装:
npm i vant -S
采用按需引入的方式 配置组件的引入:
# 安装插件 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 }] ] };
通过如上的配置,在组件内使用时,只需要引入组件就可以了,不需要再引入样式。
-
-
移动端适配
移动端适配 我们借助
postcss-pxtorem
插件实现,用于将 px 转换成 rem;使用
lib-flexible
插件用于设置 rem 基准值;安装插件:
npm i postcss-pxtorem postcss-px2rem lib-flexible style-resources-loader
-
修改 main.js 文件
// 新增下面两个导入配置 import 'lib-flexible/flexible'; // 实现了rem自适应布局 import './assets/styles/normalize.css'; // 解决不同浏览器之间的差异
-
配置Webpack
在项目中创建 vue.config.js 文件, 内容如下
const port = process.env.port || 8011; const path = require('path'); function resolve(dir) { // __dirname:项目的路径 return path.join(__dirname, dir); } module.exports = { outputDir: process.env.NODE_ENV === 'production' ? 'dist': 'douyin' , productionSourceMap: false, // 生产环境是否 生成SourceMap devServer: { port, // 启动之后 自动打开浏览器 open: true, // 报错的时候全屏显示错误 overlay: { warnings: false, errors: true }, // 设置代理 proxy: { '/api': { target: 'http://192.168.43.154:8080', // 配置你的服务器 ws: true, changeOrigin: true }, } }, css: {}, configureWebpack: { resolve: { alias: { '@': resolve('src') } } }, 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/common/styles/variables.less'), resolve('src/common/styles/mixin.less'), ], }) }
-
创建配置文件
平时我们在开发的时候,开发环境访问的地址与上线时访问地址是不一样的。如果每次都是手动修改的话 容易造成错误,我们可以借助 node.js 来判断 当前运行的环境,然后通过不同的运行环境 加载不同的请求地址。
.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"
总结
本章节通过如上配置,就完成了Vue 移动端项目的基本结构的搭建,此时就可以将项目成功启动:
下一章节: 2. 搭建项目基本骨架
项目整体介绍:Vue.js 项目实战之实现视频播放类WebApp的项目开发(仿抖音app)
项目仓库地址,欢迎 Star。
有任何问题欢迎评论区留言讨论。