VUE template 从0到1

作者: 芝麻香油 | 来源:发表于2019-08-27 21:52 被阅读0次

初始化项目

mkdir vue-template && cd vue-template
npm init

安装 webpack

npm i -D webpack
npm i -D webpack-cli

ES6转ES5

npm i -D babel-loader @babel/core @babel/preset-env

在根目录创建 src文件夹，再创建main.js,并写入：

//  src/main.js
let a = 4;
console.log('hello webpack ' + a);

在根目录创建webpack.config.js，并写入：

module.exports = {
    mode: 'development',// 指定开发者打包模式
    entry : './src/main.js',//入口文件
    output : {//输出文件
        filename : 'index.js',//输出文件名
        path :  __dirname+'/public'//输出文件路径
    },
    module : {
        rules: [
            {/*将js或者jsx文件转码成es5*/
                test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
                exclude: /node_modules/,//排除这个文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }
                  }
            },
        ]
    },
};

在package.json中加入命令：

"build": "webpack --config ./webpack.config.js",

运行：
npm run build

根目录下会生成public文件夹，并且里面有一个由 src/main.js打包出来index.js

使用 html-webpack-plugin 创建 html 页面

安装 html-webpack-plugin 插件

npm install html-webpack-plugin -D

添加入口文件

在根目录下新增 index.html，并写入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>hellow diyVue</title>
</head>
<body>
  <div id="app"></div>
<script type="text/javascript" src="index.js"></script></body>
</html>

修改 webpack.config.js 配置

const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',// 指定开发者打包模式
    entry : './src/main.js',//入口文件
    output : {//输出文件
        filename : 'index.js',//输出文件名
        path :  __dirname+'/public'//输出文件路径
    },
    module : {
        rules: [
            {/*将js或者jsx文件转码成es5*/
                test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
                exclude: /node_modules/,//排除这个文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }
                  }
            },
        ]
    },
    plugins:[
        new HtmlWebpackplugin({
            filename: 'index.html', // 打包后的文件名，默认是index.html
            template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
        })
    ]
}

查看效果

运行npm run build，可以看到public文件夹生成index.html，并且还引入了 src/main.js的压缩包index.js

安装并使用 vue

安装插件及`vue`

npm install vue-loader vue-template-compiler cache-loader thread-loader -D
npm install vue -S

vue-loader：用于解析.vue文件
vue-template-compiler：用于编译模板
cache-loader：用户缓存loader编译的结果
thread-loader：使用 worker 池来运行 loader，每个worker 都是一个nodejs 进程

修改webpack.config.js配置

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',// 指定开发者打包模式
    entry : './src/main.js',//入口文件
    output : {//输出文件
        filename : 'index.js',//输出文件名
        path :  __dirname+'/public'//输出文件路径
    },
    module : {
        rules: [
            {/*将js或者jsx文件转码成es5*/
                test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
                exclude: /node_modules/,//排除这个文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env']
                    }
                  }
            },
            {
                test: /\.vue$/,
                use: [
                  {
                    loader: 'cache-loader'
                  },
                  {
                    loader: 'thread-loader'
                  },
                  {
                    loader: 'vue-loader',
                    options: {
                      compilerOptions: {
                        preserveWhitespace: false
                      },
                    }
                  }
                ]
              },
        ]
    },
    plugins:[
        new HtmlWebpackplugin({
            filename: 'index.html', // 打包后的文件名，默认是index.html
            template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
        }),
        new VueLoaderPlugin()
    ]
}

使用vue

在src下新建App.vue，并写入：

<template>
  <div class="App">
    Hello {{msg}}
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
        msg: "Vue",
    };
  }
};
</script>

修改 src/main.js代码：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

打包及运行vue

运行npm run build，在浏览器打开public/index.html，即可看到浏览器显示：hello vue

安装本地服务及代码热加载

安装 webpack-dev-server

npm i -D webpack-dev-server

修改webpack.config.js配置

// ...
mode: 'development',// 指定开发者打包模式
  devServer: { //node本地服务器
    host: '127.0.0.1',
    port: 8010
  },
  entry : './src/main.js',//入口文件
// ...

修改package.json

加入：

"dev": "webpack-dev-server --env.dev",

运行查看结果：

运行 npm run dev
在浏览器打开 http://127.0.0.1:8010/

安装Vue-Router

装依赖

npm i -S vue-router

创建相关文件

page1.vue

<template>
    <div>
        page 1
    </div>
</template>

<script>
  export default {
    name: "page1"
  }
</script>

<style scoped>

</style>

page2.vue

<template>
    <div>
        page 2
    </div>
</template>

<script>
  export default {
    name: "page2"
  }
</script>

<style scoped>

</style>

在 src 下新增router/index.js文件:

import Vue from 'vue'
import VueRouter from "vue-router";
import page1 from '../page/page1.vue';
import page2 from '../page/page2.vue';

Vue.use(VueRouter);
export default new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/page1',
      component: page1
    },
    {
      path: '/page2',
      component: page2
    },
    {
      path: '*',
      redirect: '/page2'
    }
  ]
});

修改 main.js

import Vue from 'vue'
import App from './App.vue';
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

修改App.vue组件

<template>
    <div>
        <div class="App">
            Hello {{msg}}
        </div>

        <div>
            <router-link to="/page1">go page1</router-link>
            <router-link to="/page2">go page2</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'App',

    data() {
      return {
        msg: "Vue",
      };
    }
  };
</script>

运行npm run dev

配置基础组件

安装依赖

npm i -D sass-loader dart-sass css-loader style-loader file-loader url-loader postcss-loader autoprefixer

sass-loader，dart-sass：scss/sass将语法转为css
css-loader：解析css文件
style-loader：将css解析到html页面的style上
postcss-loader，autoprefixer：实现自动添加css3前缀

`webpack.config.js`中添加：

{
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require("autoprefixer") /*自动添加前缀*/
              ]
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }

运行及测试

src/App.vue中加入样式：

.app {
        color: red;
}

自定义环境变量及常量

创建常量文件`config/constant.js`，并写入：

const NODE_ENV = process.env.NODE_ENV; 
const config = {
  production: 'http://production',
  development: 'http://development',
};
module.exports = config[NODE_ENV];

修改`webpack.config.js`

const webpack = require('webpack');
const constant = require('./config/constant'); // 引入常量文件
// ...
plugins:[
        // ...
        new webpack.DefinePlugin({ // 定义全局变量
          CONSTANT: JSON.stringify(constant)
        })
    ],

修改`package.json`

"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js",

安装 `cross-env`

npm i -D cross-env

cross-env用于磨平mac 和win中的node环境之间的不同

运行

npm run dev

区分开发和生产打包

在config下创建dev和prod的webpack文件

公共 webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
const webpack = require('webpack');
const constant = require('./config/constant'); // 引入常量文件
module.exports = {
  entry: './src/main.js',//入口文件
  output: {//输出文件
    filename: 'index.js',//输出文件名
    path: __dirname + '/public',//输出文件路径
    // publicPath: "public", // 虚拟目录，自动指向path编译目录，放在内存中，所以在硬盘上是找不到的 默认是：/
  },
  module: { // 当执行require或import命令时匹配下面的加载规则
    rules: [
      {/*将js或者jsx文件转码成es5*/
        test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件
        exclude: /node_modules/,//排除这个文件夹
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { // vue文件处理
        test: /\.vue$/,
        use: [
          {
            loader: 'cache-loader'
          },
          {
            loader: 'thread-loader'
          },
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
            }
          },
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)/,
        use: [{
          loader: "file-loader",
          options: {
            name: '[name].[ext]',
            outputPath: "public/assets/", // 输出目录
            limit: 8192,
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackplugin({
      filename: 'index.html', // 打包后的文件名，默认是index.html
      template: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板
    }),
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({ // 定义全局变量
      CONSTANT: JSON.stringify(constant)
    })
  ],
};

开发环境webpack.dev.js
- 不需要压缩代码
- 需要本地服务和热更新
- css 不需要提取到 css文件
- sourceMap

const merge = require('webpack-merge');
const webpackConfig = require('../webpack.config')
module.exports = merge(webpackConfig, {
  devtool: 'cheap-module-eval-source-map',
  mode: 'development',// 指定开发者打包模式
  devServer: { //node本地服务器
    host: '127.0.0.1',
    port: 8010
  },
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require("autoprefixer") /*自动添加前缀*/
              ]
            }
          }
        ]
      },
    ]
  },
});

生产环境webpack.prod.js
- 压缩代码
- 不需要本地服务和热更新
- 提取 css，压缩css
- sourceMap
- 构建前清楚上一次构建的内容

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const webpackConfig = require('../webpack.config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = merge(webpackConfig, {
  mode: 'production',// 指定开发者打包模式压缩js代码
  devtool: '#source-map',
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\\/]node_modules[\\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('dart-sass')
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require("autoprefixer") /*自动添加前缀*/
              ]
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css'
    }),
    new OptimizeCssnanoPlugin({
      sourceMap: true,
      cssnanoOptions: {
        preset: [
          'default',
          {
            mergeLonghand: false,
            cssDeclarationSorter: false
          }
        ]
      }
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../public'),
        to: path.resolve(__dirname, '../dist')
      }
    ]),
    new CleanWebpackPlugin(), // 用于删除上次构建的文件
  ]
});

安装依赖

npm i -D @intervolga/optimize-cssnano-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin

@intervolga/optimize-cssnano-plugin：用于压缩css代码
mini-css-extract-plugin：提取css到文件中
clean-webpack-plugin：删除删词构建的文件
webpack-merge：合并webpack配置
copy-webpack-plugin：拷贝静态资源

修改`package.json`

"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.js",

运行

npm run dev

VUE template 从0到1

初始化项目

安装 webpack

ES6转ES5

使用 html-webpack-plugin 创建 html 页面

安装 html-webpack-plugin 插件

添加入口文件

修改 webpack.config.js 配置

查看效果

安装并使用 vue

安装插件及vue

修改webpack.config.js配置

使用vue

打包及运行vue

安装本地服务及代码热加载

安装 webpack-dev-server

修改webpack.config.js配置

修改package.json

运行查看结果：

安装Vue-Router

装依赖

创建相关文件

配置基础组件

安装依赖

webpack.config.js中添加：

运行及测试

自定义环境变量及常量

创建常量文件config/constant.js，并写入：

修改webpack.config.js

修改package.json

安装 cross-env

运行

区分开发和生产打包

在config下创建dev和prod的webpack文件

安装依赖

修改package.json

运行

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

安装插件及`vue`

`webpack.config.js`中添加：

创建常量文件`config/constant.js`，并写入：

修改`webpack.config.js`

修改`package.json`

安装 `cross-env`

修改`package.json`