1、vue

1.1 构建vue项目

# 1.创建vue项目
vue init webpack export2excel
注：1）vue init 会自动执行npm init去引入node的一些基础配置
        2）init后会生成对应的pack.json配置文件
# 2.安装依赖
npm install
注：install后会自动生成package-lock.json配置文件
# 3.运行vue项目
npm run serve

1.2 安装相关依赖

# 1.安装element-ui
npm install --save element-ui
# 2.安装Excel需要的依赖
npm install --save xlsx file-saver

1.3 遇到的问题

Uncaught TypeError: Cannot read property ‘prototype’ of undefined?

2、vue-cli

2.1 安装Vue脚手架

# 安装vue-cli
npm install -g @vue/cli
# 查看vue-cli版本
vue --version

2.2 创建Vue2-CLI项目

# vue-cli2创建项目
vue init webpack 项目名称

2.3 创建Vue3-CLI项目

# vue-cli3创建项目
vue create 项目名称

3. webpack

3.1 安装webpack

npm install webpack -g

3.2 commonjs和es6导出用法的区别：

commonjs在用的时候，只需要是node环境即可，是nodejs原生支持的，因此webpack的配置文件一般用commonjs
es6在用的时候需要加入babel-loader和babel-core来帮助解析es6语法

3.3 webpack打包

注：vue-cli打包也是基于webpack进行打包的
vue-cli会帮助我们配置webpack.config.js，并设置一些默认的属性
（vue-cli使用的webpack.config.js为./node_module/@vue/cli-service/webpack.config.js）

3.3.1 初始方法

手动创建index.html文件
通过webpack ./src/main.js ./dist/bundle.js 将入口js打包到dist目录中
修改index.html中引用打包后的js

3.3.2 webpack配置文件方法
注：以下内容为3.3.1节的步骤二，其余步骤一样
手动创建webpack.config.js文件
复制粘贴以下内容 ```javascript const basePath = require(‘path’)

module.exports = { entry: ‘./src/main.js’,//打包的入口 output: { path: basePath.resolve(__dirname, ‘dist’), filename: ‘bundle.js’ } }


3. 通过webpack命令，会根据刚才新建的配置文件自动寻找打包的入口和出口
<a name="mOUqn"></a>
#### 3.3.3 关于本地webpack和全局webpack
如果直接在终端输入webpack，则用的是全局的webpack版本<br />如果使用的是npm run build，脚本中配置的build：webpack，那么用的是本地的，即node_module中的版本<br />**所以，尽量不要直接在终端中输入webpack，而是通过node配置script来进行webpack打包**
<a name="yv5YL"></a>
## 3.4 webpack.config.js 开发/测试/生产配置文件分离
<a name="Z6j2W"></a>
#### 3.4.1 安装webpack-merge插件
```shell
npm install webpack-merge --save-dev

3.4.2 修改配置文件

新建base.config.js、dev.config.js、test.config.js、prod.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('base.config.js')
webpackMerge.merge(baseConfig, {
})

3.4.3 修改base.config.js

module.exports = {
    entry: './src/main.js',//打包的入口
    output: {
        path: basePath.resolve(__dirname, '../dist'), //修改打包出口位置
        filename: 'bundle.js'
    },

3.4.4 修改package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "webpack --config ./build/dev.config.js" //使用自定义配置文件
  },

=========================================================================================

4、其他

4.1 配置node镜像源

# 配置node源
npm config set registry http://registry.npm.taobao.org
# 查看是否配置成功
npm config get registry

4.2 为什么项目中即有commonjs语法又有es6语法

在配置文件中，引入一些nodejs环境提供的属性/变量时，需要用到commonjs语法，因为nodejs是通过commonjs导出的属性，只能用commonjs方式导入，而自定义的一些属性/配置，如果要使用es6语法，则需要加入babel来转换为浏览器支持的语法

4.3 一些常见的配置文件

4.3.1 webpack.config.js

配置打包的一些属性

const basePath = require('path')
module.exports = {
    entry: './src/main.js',//打包的入口
    output: {
        path: basePath.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules | bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

4.3.2 package.json

4.3.3 package-lock.json

4.3.4 vue.config.js

基于Vue-cli3的配置文件，Vue-cli3默认提供一些初始化配置，如果想自定义一些配置，可以通过新建vue.config.js来修改其中的一些配置

4.3.5 babel.config.js

4.4 HtmlWebpackPlugin

4.4.1 安装插件

npm install html-webpack-plugin --save-dev

4.4.2 修改webpack.config.js配置文件

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
]

4.4.3 修改index.html

<!-- 注：不需要自己引入生成的bundle.js，html-webpack-plugin插件会自动帮我们引入 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

4.4.4 删除webpack.config.js中output配置的basePath

否则插入的script标签中的src可能会有问题

运维环境部署

04 vue项目打包及部署