# vue3工程

**Repository Path**: lanbin1017/vue3-project

## Basic Information

- **Project Name**: vue3工程
- **Description**: vue3工程
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-09
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3工程

## 介绍
vue3工程

## 搭建开发环境

> 需要本地安装node10

1. 初始化package.json
```
yarn init -y
```
2. 创建src文件夹

```
 vue3-project
  |-- package.json
  |-- src
```
3. 安装依赖
```js
//安装vue相关的模块
yarn add vue@next  --save
//安装webpack相关的模块
yarn add webpack-cli webpack  --dev
```
4. 创建main.js、app.vue和index.html
```
 vue3-project
  |-- package.json
  |-- public
    |-- index.html
  |-- src
    |-- app.vue
    |-- main.js
```

 + app.vue
```html
<template>
  <router-view></router-view>
</template>
<script>
export default {
  setup(props,context){
      
  }
}
</script>
<style lang='less'>
</style>
```
 + main.js
```js
import { createApp } from 'vue'
import App from './app.vue'
const app = createApp(App)
app.mount('#app')
```

5. 配置webpack
在根目录下新增webpack.config.js文件
```
// 引入node路径模块
const path = require('path')
module.exports = {
    // 配置入口
    entry: './src/main.js',
    // 配置出口
    output: {
        // 输出文件目录
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js'
    }
}
```

6. 配置打包的mode

```js

// 引入node路径模块
const path = require('path')
const merge = require('webpack-merge')
const dev = require('./webpack.dev')
const prod = require('./webpack.prod')
const base = {
    // 配置入口
    entry: './src/main.js',
    // 配置出口
    output: {
        // 输出文件目录
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js'
    }
}
module.exports = (env) => {
    if (env.development) {
        return merge(base, dev)
    } else {
        return merge(base, prod)
    }
}

```

12. 配置loader
安装vue-loader、css-loader、style-loader、less-loader
```sh
// vue/compiler-sfc
yarn add vue-loader@^16.0.0-rc.1 vue/compiler-sfc@3.0.2 css-loader  less-loader style-loader babel-loader @babel/preset-env @babel/core @vue/babel-plugin-jsx --dev
```
```js
const { VueLoaderPlugin } = require('vue-loader')

module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: 'css-loader'
            },
            {
                test: /\.less/,
                use: 'less-loader'
            }
        ]
    }
plugins: [
        new VueLoaderPlugin(),
    ]
```


9. 配置开发服务器，实现在内存中打包,并且自动启动服务

安装webpack-dev-server
```sh
yarn add webpack-dev-server 
```
配置启动命令
+ 通过env参数区分环境
+ 通过config 参数指定使用哪个配置文件来进行打包
```json
"scripts":{
    "build": "webpack --env.production --config ./webpack.config",
    "serve": "webpack serve"
}
```
通过执行npm run serve来启启动开发环境
```js
// 如果报错就删掉package.json中的这几个包，一起安装试试
yarn add webpack webpack-cli webpack-dev-server webpack-merge -D
// 是在搞不定指定版本安装
yarn add webpack@^3.8.0 webpack-dev-server@^2.9.7 html-webpack-plugin@^3.2.0 --dev
```
base.js
```js
devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    compress: true, // 压缩
    port: 8088
},
```

10. 打包Html

安装打包html插件
```sh
yarn add html-webpack-plugin --dev
```
base.json
```js
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        path: path.resolve(__dirname, '../public/index.html'),
        hash: true, // 在引用的文件后面增加hash戳
    })
]
```

11. 配置第二次打包前清空第一次打包结果
安装插件
```sh
yarn add clean-webpack-plugin --dev
```
base.json
```js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin({
    // 清空匹配的路径
    cleanOnceBeforeBuildPatterns: [path.resolve('dist/*'),'**/*'],
})
```