Vue项目相关

VUE

一、 环境安装
1、 安装node.js
下载对应安装包进行安装，具体步骤可百度
安装完成后通过命令 node -v 和 npm -v 查看是否安装成功

2、 更换淘宝 NPM 镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、创建项目
1、 全局安装vue
已安装过可忽略此步骤，可通过 vue 命令查看是否全局安装

cnpm install -g vue-cli

2、创建一个基于webpack的项目

vue init webpack my-project

? Project name  输入项目名称

? Project description 输入项目描述

? Author 作者

? Vue build 打包方式，回车就好了

? Install vue-router?  选择  Y 使用 vue-router，输入 N 不使用，推荐 Y

? Use ESLint to lint your code? 代码规范，推荐 N

? Setup unit tests with Karma + Mocha? 单元测试，推荐 N

? Setup e2e tests with Nightwatch? E2E测试，N

? Should we run `npm install` for you after the project has been created? 是否运行npm install进行安装 推荐 N（后续用cnpm install）

3、安装依赖

cd my-project
cnpm install

4、运行项目（开发模式）

npm run dev

三、打包优化
1、 Gzip

修改/config/index.js文件内build.productionGzip = true
安装依赖compression-webpack-plugin版本号为1.1.12

cnpm install --save-dev compression-webpack-plugin@1.1.12

#可修改 /build/webpack.prod.js 中 CompressionWebpackPlugin 配置 threshold 为 0

2、 多环境发布
#添加环境变量

vim /etc/profile

添加 export NODE_BUILD_ENV=“production”

source /etc/profile

或者执行build命令时设置发布环境

NODE_BUILD_ENV=production npm run build

修改文件 /build/webpack.prod.js

...
let configFile;
switch (process.env.NODE_BUILD_ENV) {
   default:
      configFile = '../config/local.env';
      break

   case 'production':
      configFile = '../config/prod.env';
      break;

   case 'test':
      configFile = '../config/test.env';
      break;
}
const env = require(configFile)
...

3、 版本过度

修改 /build/build.js

...
/**
 * 版本过渡，保存上一版本发布前一段时间内的版本，清除更早期版本
 * 解决新版本上线前已打开的页面js加载错误
 */
const fs = require('fs')
fs.access(config.build.index, fs.constants.F_OK, (err) => {
   if (!err) {
      const stats = fs.statSync(config.build.index);

      const cleanTimeMs = stats.mtimeMs - (config.build.versionCleanTimeMs || 86400000);

      /**
       * 递归删除
       *
       * @param {dir} dir
       */
      function cleanFiles(dir) {
         let files = fs.readdirSync(dir);
         for (let i in files) {
            if (files.hasOwnProperty(i)) {
               let filePath = path.join(dir, files[i]);
               let fileStat = fs.statSync(filePath);
               if (fileStat.isDirectory()) {
                  cleanFiles(filePath);
               } else {
                  if (fileStat.mtimeMs < cleanTimeMs) {
                     try {
                        fs.unlinkSync(filePath);
                        console.log('  success: ' + fileStat.mtime + '  ' + filePath);
                     } catch (err) {
                        console.log('  field: ' + fileStat.mtime + '  ' + filePath);
                        console.log('  Error: ', err);
                     }
                  }
               }
            }
         }
      }

      // 防止短时间内多次发布
      const timestamp = new Date().getTime();
      if (stats.mtimeMs < timestamp - 86400000) {
         console.log(chalk.red('\n  rm old version'))
         cleanFiles(path.join(config.build.assetsRoot, config.build.assetsSubDirectory));
         console.log(chalk.cyan('  rm finish.\n'))
      }

   }

   // 发布新版本
   spinner.text = 'build new version ...'
   webpack(webpackConfig, (err, stats) => {
      spinner.stop()
      if (err) throw err
      process.stdout.write(stats.toString({
         colors: true,
         modules: false,
         children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
         chunks: false,
         chunkModules: false
      }) + '\n\n')

      if (stats.hasErrors()) {
         console.log(chalk.red('  Build failed with errors.\n'))
         process.exit(1)
      }

      console.log(chalk.cyan('  Build complete.\n'))
      console.log(chalk.yellow(
         '  Tip: built files are meant to be served over an HTTP server.\n' +
         '  Opening index.html over file:// won\'t work.\n'
      ))
   })
});
...

四、其他问题
1、 Ubuntu系统非root，部分文件修改后不会自动编译

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf&& sudo sysctl -p

2、name: “keepAlive” 不可随便使用，会导致多层嵌套路由卡死

3、yarn

npm install -g yarn
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

4、vue-devtools 安装
条件允许可以在谷歌浏览器上直接安装扩展
以下是编译安装方法

git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtools
yarn install
yarn run build

Chrome浏览器 > 设置 > 拓展程序（打开开发者模式）> 加载已解压程序 > 选择文件夹 PATH/vue-devtools/packages/shell-chrome

引入 store 之前配置

Vue.config.devtools = process.env.NODE_ENV !== 'production';