# Vue-自定义配置脚手架

**Repository Path**: yy-123/vue_test1

## Basic Information

- **Project Name**: Vue-自定义配置脚手架
- **Description**: 从无到有配置vue单页 简单项目直接安装使用，简单方便
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



-------- webpack初始配置-------- 
1.项目初始化  cd 'to/your/path' npm init
2.npm install --save-dev webpack    (如果是webpack 4+ 版本还需要安装 npm install --save-dev webpack-cli)
3. 配置package.json添加开发环境生产环境   "build": "webpack --mode production"
4.新建并配置webpack.config.js     配置入口 出口 loader  插件
接着可以测试进行运行 npm run bulid查看命令效果，生成了对应的打包文件
5.安装html-webpack-plugin  npm install html-webpack-plugin --save-dev
      const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
        ...
        new HtmlWebpackPlugin({
            title:'vue 学习',
            filename:'index.html',
            template:path.resolve(__dirname, "index.html")
        }),
        ...
    ]

-------- webpack安装vue进行使用-------- 
 6.安装Vue  npm install vue-loader vue-template-compiler
   webpack配置文件添加  const VueLoaderPlugin = require('vue-loader/lib/plugin');
修改main.js：
    import Vue from  'vue';
    var App = new Vue({
        el:'#main',
        data:{
            message:'Hello world'
        }
    })
修改index.html:
   <div id="main">
      <h3>{{message}}</h3>
   </div>   
执行webpack打包运行index.html(打包的文件)报错，经查在webpack.config.js里面配置：
    resolve: { alias: { 'vue': 'vue/dist/vue.js' } }

7.安装webpack-dev-server热更新  npm install webpack-dev-server --save-dev
 devServer: {
        historyApiFallback: true,
 },
 也可以此处配置host port open等其它参数
 配置生产环境  "dev": "webpack-dev-server --mode development",

到这一步我们就可以进行运行和测试vue是否正确安装使用，以及更改内容后即时浏览

8.安装babel 在使用.vue文件之前先要安装babel(将es6语法转化为es5)
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-env
项目根目录新建.babelrc文件、配置：
{
    "presets": ["env", "react"]
}
module:{
       rules: [
           {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: { loader:'babel-loader' },
            }
}
运行测试时如果发现运行时有报错根据提提示安装提示的插件包

-------- 其它相关配置-------- 
1. 加载css   npm i --save-dev style-loader css-loader   
2. 加载图片/字体  npm i --save-dev url-loader file-loader    file-loader 和 url-loader 可以接收并加载任何文件
3. 清理 /dist 文件夹  npm install clean-webpack-plugin --save-dev
4. 使用 source map  config:  devtool: 'inline-source-map'
4. 启用less  npm install less less-loader --save
webpack.config.js中再一一配置相关规则