记录一下基于vue2.x+vue-cli3.x构建项目及构建后大概过程和需要的依赖

记录一下基于vue2.x+vue-cli3.x构建项目及构建后大概过程和需要的依赖，每次建项目就忘光光了

1. node+npm+webpack+vue+vue-cli
   node:node.js官网 （node -v 参考10.x）
   npm:新版nodejs安装后有npm（npm -v 参考6.x）（npm官方镜像源）

    npm config set registry https://registry.npmjs.org/
   

   cnpm: 淘宝镜像 安装命令，先清除淘宝镜像，再安装，安装以后cnpm没反应的时候也可以这么做
   使用npm config get registry可以检测npm指向

   ---

   最新淘宝镜像（https://registry.npmmirror.com）2024/7/18 更新

   npm config set registry http://registry.cnpmjs.org 
   //npm install cnpm -g --registry=https://registry.npm.taobao.org
   npm install cnpm -g --registry=https://registry.npmmirror.com
   或者
   //npm install --registry=https://registry.npm.taobao.org    // cnpm 有很多问题的时候，这个为佳
   npm install --registry=https://registry.npmmirror.com
   

   webpack:中文官网

   全局 cnpm install webpack -g
   项目中 cnpm install --save-dev webpack
   

   vue: 官网

   cnpm install -g vue
   

   vue-cli 官网

   npm install -g @vue/cli
   

   xxx -v 查询安装的版本
   

2. cmd => vue ui (或者vue create myProject) 创建一个基于vue-cli3.x(2.x)的项目
   创建时需要选择的一些依赖和成功之后的项目目录下图（绿色的不是）
3. 有项目之后，根目录下创建vue.config.js，webpack相关

   module.exports = { }
   

4. 创建一些需要的文件夹styles(存放样式)、utils（js）、api(接口)
   为了方便访问，设置alias （vue.config.js）

   const path = require('path')
   function resolve (dir) {
     return path.join(__dirname, dir)
   }
   module.exports = {
   	configureWebpack: {
       // provide the app's title in webpack's name field, so that
       // it can be accessed in index.html to inject the correct title.
       name: name,
       resolve: {
         alias: {
           '@': resolve('src'),
           'assets': resolve('src/assets'),
           'styles': resolve('src/styles'),
           'api': resolve('src/api'),
           'utils': resolve('src/utils'),
           'views': resolve('src/views')
         }
       }
     }
   }
   

   引入

   import {} from '~styles/test.css'
   

5. 环境变量和模式 官网
6. 需要的插件
   qs: 数据序列化
   axios:请求
   …
7. styl 全局引入变量 自动化导入
8. 新电脑安装出现的问题 转自
   
   cnpm install
   cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go
   .microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
   所在位置 行:1 字符: 1

• cnpm install

• CategoryInfo : SecurityError: (😃 []，PSSecurityException

• FullyQualifiedErrorId : UnauthorizedAccess

  1）.在win10 系统中搜索框 输入 Windos PowerShell
  选择 管理员身份运行
  
  2）打开了powershell命令行之后,输入
  set-ExecutionPolicy RemoteSigned
  然后更改权限为A
  最后通过 get-ExecutionPolicy 查看当前的状态
  

9. TerserPlugin 生产版去掉console.log
   安装 (webpack4.x=>terser-webpack-plugin4.x, v5对应v5)

npm i terser-webpack-plugin@4.x --save-dev

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
    	terserOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log'], // 移除console
            },
          },
        })
    ],
  },
};