学了vue和webpack的笔记

首先把package.json贴出来，这里很多插件存在版本区别，因此要特别注意版本，不是所有的安装最新的都行

{
  "name": "life_manager",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "vue": "^2.5.17",
    "vue-router": "^2.8.1",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "vue-loader": "^13.7.3",
    "vue-template-compiler": "^2.5.17",
    "webpack-dev-server": "^2.11.3"
  }
}

View Code

其次是webpack.config.js文件

const path = require("path");
const htmlWebpack = require("html-webpack-plugin");//首先是这里要引用

module.exports = {
    entry: path.join(__dirname, './src/main.js'),//指定入口文件
    output: {
        path: path.join(__dirname, './dist'),//指定输出的文件路径
        filename: 'bundle.js'//指定输出的文件名
    },
    plugins: [
        new htmlWebpack({//其次是这里要实例化
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ],
    module: {//配置所有的第三方模块加载器
        rules: [
            {
                //配置处理.css文件的第三方loader规则
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=2000&name=[hash:8]-[name].[ext]' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    },
    resolve:{
        alias:{
            // "vue$":"vue/dist/vue.js"
        }
    }
}

View Code

在看看项目结构

index.html代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./bundle.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

main.js代码如下：

import $ from 'jquery'
import './css/index.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import user from './vue/user.vue'
import role from './vue/role.vue'
import app from './vue/app.vue'

Vue.use(VueRouter);

var router = new VueRouter({
    routes: [
        { path: "/user", component: user },
        { path: "/role", component: role },
    ]
});

var v1 = new Vue({
    el: "#app",
    render: c => c(app),
    router
})

app.vue代码如下：

<template>
    <div>
        <h2>收支管理系统</h2>
        <router-link to="/user">用户管理</router-link>
        <router-link to="/role">角色管理</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    
}
</script>

.babelrc内容如下：

{
    "presets": [
        "env","stage-0"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

常用技术点说一下

nrm 的使用，用于设置镜像的地址
webpack-dev-server 用于开发过程，热部署，不用每次重启
html-webpack-plugin 用于将html加载到内存中，而非物理磁盘
style-loader css-loader 用于样式表的解析
url-loader file-loader 用于样式中存在图片、字体等url地址的处理
babel-core 用于ES6高级语法解析
vue-loader vue-template-compiler 用于解析独立的vue文件

学了vue和webpack的笔记

猜你喜欢