美文网首页
VUE template 从0到1

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",

运行查看结果：

安装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 在根目录创建 src文件夹，再创建main.js,并写...

  • Vue

    vue3.0项目从0到1 vue3.0项目从0到1-初始化项目[https://www.jianshu.com/p...

  • vue build时vue-template-compiler版

    1、vue-template-compiler版本不对 2、先uninstall vue-template-com...

  • Vue + ts 深层次（无限）循环

    1.父组件： import { Component,Vue } ...

  • 单文件组件

    1.APP.vue //引入组件 impor...

  • 从0到0，从0到1。

    昨天和一客户交流，听到这么一句话，我现在的阶段勉强算0到0的阶段，到那个1的阶段还没有看到，或者说并不知道那个1在...

  • webpack 从 0 到 1 构建 vue

    前端领域框架百花齐放，各种优秀框架出现（react，Vue，ag）等等框架。为了方便开发者快速开发， 开发对应的 ...

  • 从 0 到 1 认识从 0 到 1

    看了太多从 0 到 1 的标题了，总感觉那是在乱用流行的标题，记得这个标题是从阿里开始的，从 0 到 1 的书，活...

  • 组件定义与使用

    1. vue 文件的组成(3 个部分) 1）模板页面 2）JS ...

  • 从1到0，0到1。

    把经历过的一切事情都归零是件很难可以做到的事情，并不会像计算器那么简单。 有时候想，如果人的大脑能像机器那样多好，...

网友评论

      本文标题：VUE template 从0到1

      本文链接：https://www.haomeiwen.com/subject/wdiyectx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|VUE template 从0到1|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！