Vue.js 实战系列之实现视频类WebApp的项目开发——1. 项目初始化

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

---

基础环境搭建

1. 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
   

2. 引入其他内容

   1. 第三方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
          }]
        ]
      };
      

      通过如上的配置，在组件内使用时，只需要引入组件就可以了，不需要再引入样式。

3. 移动端适配

   移动端适配 我们借助 postcss-pxtorem 插件实现，用于将 px 转换成 rem；

   使用 lib-flexible 插件用于设置 rem 基准值；

   安装插件：

   npm i postcss-pxtorem postcss-px2rem lib-flexible style-resources-loader
   

4. 修改 main.js 文件

   // 新增下面两个导入配置
   import 'lib-flexible/flexible';   // 实现了rem自适应布局
   import './assets/styles/normalize.css';    // 解决不同浏览器之间的差异
   

5. 配置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'),
         ],
       })
   }
   

6. 创建配置文件

   平时我们在开发的时候，开发环境访问的地址与上线时访问地址是不一样的。如果每次都是手动修改的话 容易造成错误，我们可以借助 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。

有任何问题欢迎评论区留言讨论。