vue项目开发过程

---

1.确定项目开发的技术栈

vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack

2.搭建项目

使用 npm(cnpm) yarn 包管理工具 安装依赖文件 或 下载插件
全局安装axios 两种方式： 1. cnpm install axios -S
2.yarn add axios -S
-S 是：–save-dev 生产环境依赖 （dependencies）
-D 是 -dev 开发环境依赖 （devDependencies）

3.从0开始搭建

3.1使用命令的方式搭建

vue create 项目名称
…
cd 项目名称
yarn install 或者 cnpm i 安装依赖文件
启动 cnpm run serve

3.2 使用UI界面搭建项目
使用UI界面搭建 可以安装插件 配置文件 启动项目
使用vue ui 启动UI界面

vue   ui

4.使用模板开发项目

4.1使用模板的好处 ：快 便捷 基本的插件或文件 准备好了
其中包含以下

1.多环境变量的配置
2.axios请求拦截 响应拦截 （API统一管理）
3.scss（预编译）
4.rem 移动端适配方案
5.vant-ui 或者 Element-ui 引入
6.本地跨域请求
7.vuex
8.300毫秒延迟问题（有些旧设备点击事件300毫秒延迟问题）
9.1px边框像素问题
10.初始化样式（(reset.css引入项目)）
11.js工具文件 （防抖、节流、日期处理、数据类型检测）
12.字体图标引入

300毫秒延迟问题的解决
安装 fastclick 在全局main.js中引入

yarn add fastclick -S
//main.js 
import fastclick from "fastclick";
fastclick.attach(document.body);

1px边框像素问题
解决方案：在assets文件下创建css文件在吃文件中创建border.css
写入下面代码 最后再main.js中引入

// aseets/css/border.css
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}
------------------------------------
// main.js
import './aseets/css/border.css'

5.配置路由

5.1路由嵌套
5.2 路由传参
5.3 路由守卫
5.4 keep-alive

6.组件化开发

6.1 组件拆分合理 （公共组件，页面级别组件、功能性组件）
6.2 组件开发
组件传值 （父传子，子传父，兄弟组件，vuex）

7.webpack配置打包优化 （vue.config.js）

一系列配置。。。。。。。

7.1：配置静态资源路径 为了打包后的项目可以正常运行

新建vue.config.js文件 设置静态资源路径

module.exports = {
	publicPath: "./"
}

7.2：关闭生产环境下的SourceMap映射文件,包的大小减少80%；

module.exports = {
	productionSourceMap: false,
}

7.3：配置跨域

module.exports = {
  devServer: {
   open: false, // 自动启动浏览器
   host: '0.0.0.0', // localhost
   port: 6060, // 端口号
   hotOnly: false, // 热更新

   overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    },
    proxy: {
      //配置跨域
      '/api': {
        target: 'https://www.test.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

或者

module.exports = {
  publicPath: './',  //改变js  css 等文件 路径为相对路径
  // 关闭生产环境下的SourceMap映射文件 包的大小减少80%
  productionSourceMap:false,
  devServer: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 线上后端地址
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
 }

7.4：配置alias别名

//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

配置完成之后

//之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//也可以这么写
import Home from '@/views/Home.vue'

7.5：CDN加速优化

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：

在vue.config.js中实现

const isProduction = process.env.NODE_ENV === 'production';

// externals
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios'
}
// CDN外链，会插入到index.html中
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: []
  },
 // 生产环境
  build: {
    css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
    ]
  }
}
module.exports = {
  configureWebpack: config => {
    // 为生产环境修改配置...
    if (isProduction) {
      // externals
      config.externals = externals
    }
  },
  chainWebpack: config => {
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    config.plugin('html').tap(args => {
      if (isProduction) {
        args[0].cdn = cdn.build
      } else {
        args[0].cdn = cdn.dev
      }
      return args
    })
  }
}

在public/index.html头标签中加入 模引擎代码

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
     <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

使用过后 打包会缩小体积

7.6：去除注释和console.log()

首先下载插件 借助插件来实现

cnpm install uglifyjs-webpack-plugin --save-dev

在vue,config.js中

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';

  configureWebpack: config => {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  },

重新打包，dist体积减少并不大。因为congsole.log()以及注释并不会占用太多体积,取决于项目中注释，和console.log()数量