Vue_环境搭建

1、初始化项目

1) 生成package.json
	yarn init -y

2) 创建入口: src/index.js
	console.log('Hello Webpack!')
	document.getElementById('root').innerHTML = '<h1>Hello222</h1>'

3) 创建页面文件：index.html
	<div id="root"></div>

2、webpack基本使用

0) 移除软件
	npm remove webpack webpack-cli -g
	yarn global remove webpack-cli

1) 下载依赖包
	yarn add -D webpack webpack-cli
	yarn add -D html-webpack-plugin

2) 创建webpack配置：webpack.config.js
	const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
	module.exports = {
        // 模式：生产环境
 		mode: 'production',
        //入口
        entry: {
            app: path.reslove(_dirname, 'src/index.js')
        },
        // 出口(打包生成js)
        output: {
          filename: 'sttatic/js/[name].bundle.js'
          path: path.resolve(_dirname, 'dist')
        },
 		//模块加载器
        module: {
            rules: [
                
            ]
        },
        //插件
        plugins: [
            new HtmlWebpackPlugin({
                template: 'index.html',
                filename: 'index.html'
            })
        ]
    }
    
3) 生成环境打包兵运行
	配置打包指令: "build": "webpack --mode production" 
	打包项目: yarn build
    运行打包项目: server dist

3、开发环境运行

1) 现在的问题
	每次修改项目代码后，必须重新打包，重新运行
    
2) 下载依赖包
	yarn add -D webpack-dev-server

3) 配置开发服务器
	deServer :{
        open: true, //自动打开浏览器
        quiet: true, //不做太多日志输出
    },

4) 配置开启source-map调试
   	devtool: 'cheap-module-eval-source-map',
      
5) 开发环境运行
	配置命令： 'dev': "webpack-dev-server --mode development"
    执行命令：yarn dev

4、打包处理ES6/CSS/图片

1) 处理ES6
	a. 下载依赖包
	yarn add -D babel-loader @babel/core @babel/preset-env
	b. 配置
		{
            test: /.js$/,
            //exclude: /(node_modules|bower_componentts)/,
            include: path.resolve(__dirname, 'src'),
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@bable/preset-env']
                }
            }   
        }

2) 处理 CSS
	a. 下载依赖包
		yarn add -D css-loader style-loader
	b. 配置
		{
            test：/.css$/,
            use: ['style-loader', 'css-loader'], //多个loader从下向上，从右到左处理
        }
            
3)处理图片
	a. 下载依赖包
          yarn add -D url-loader@2.3.0 file-loader@4.3.0
    b. 配置
          {
              test:/.(png|jpe?g|gif|svg)(?.*)?$/,  //处理js文件
              include: [reslove('src')], //只对匹配的文件夹处理
              loader: 'url-loader', // 内部会使用file-loader
              options: {
                  limit: 10 * 1024, // 小于10K的图片就进行base64处理
                  name: 'static/img/[name].[hash:7].[ext]' //相对于output.path
                  presets: ['@babel/preset-env'], // 配置预设包(包含了多个ES语法解析的plugin包)
                  plugins: [ //配置预设包之外的插件包
                      
                  ]
              }
          }

4) 测试
	a. 添加图片：src/assets/imgs/logo.png
    b. 添加css：src/assets/css/my.css
            img{
                 200px;
                height: 200px;
            }
	c. index.js
           import logo from './assets/imgs/logo.png'
           import './assets/css/my.css'
5)

5、搭建Vue的环境

0) 文档
	https://vue-loader.vuejs.org/zh/

1) 下载依赖包
	yarn add vue
    yarn add -D vue-loader vue-template-compiler

2) 配置
	const VueLoaderPlugin = require('vue-loader/lib/pligin')
    {
        test:/.vue.$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'vue-loader'
    }

	{
        test:/.css$/,
        use: ['vue-style-loader', 'css-loader'],
    }
     
    new VueLoaderPlugin()
     
    // 引入模块的解析
    resolve: {
        extensions: ['js.', '.vue', '.json'] //可以省略的后缀名
        alisa: {// 路径别名(简写方式)
        	'vue$': 'vue/dist/vue.esm.js', // 表示精准匹配
        }
    }

6、 解决开发环境ajax请求跨域问题

7、 配置async/await的编译环境

1) 下载包
	yarn add @babel/polyfill
2) 引入
	import '@babel/polyfill'
3) 优化: 不引入polyfill包，配置实现按需引入打包polyfill
	presets: [
        ['@babel/preset-env',{
            useBuiltIns: 'useage',
            'corejs': 2 //处理一些新语法的实现
        }]
    ]

8、 解决mint-ui按需配置异常的问题

1) 文档上的配置
	"plugins": [
        ["component",[
            {
                "libraryName": "mint-ui",
           		 "style": true
            }
        ]]
    ]

2) 异常信息：
Error： .plugins[0][1] must be an object, false,or underfined

3) 原因：
	文档编写时，是根据老的babel版本编写的，新版本的babel配置有变化，以前是数组，现在只能是对象
    
4) 修正
	"plugins": [
        ["component",{
            "libraryName": "mint-ui",
            "style": true
        }]
    ]

9、解决history模式；路由请求404的问题

deServer: historyApiFallback: true, //任意的404响应都被替代为index.html
output: publicPath: '/', // 引入打包的文件时路径以/开头