学了vue和webpack的笔记

时间：2023-02-23 09:57:27

首先把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"

  }

}

其次是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"

        }

    }

}

在看看项目结构

学了vue和webpack的笔记

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的笔记的更多相关文章

  1. 每天记录一点：NetCore获得配置文件 appsettings&period;json vue-router页面传值及接收值 详解webpack &plus; vue &plus; node 打造单页面&lpar;入门篇&rpar; 30分钟手把手教你学webpack实战 vue&period;js&plus;webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  2. 在基于vue的webpack脚手架开发中使用了代理转发，结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办？

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  3. vue&period;js应用开发笔记

    看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...

  4. VUE &plus; vue-cli &plus; webpack 创建新项目

    首先记录一下命令. 这是一个睿智新手的笔记. p.s.这是配置好环境以后的命令. ----------------------------------------------- $ npm insta ...

  5. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  6. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  7. webpack入门笔记

    此为第一篇主要是webpack入门笔记: http://if-true.com/2015/10/16/webpack-tutorial-translate.html

  8. Vue&period;js——webpack

    Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...

  9. vue&period;js2&period;0新手笔记（一）——安装

    知道vue很长时间了,一直只是了解,没有深入学习,也没做什么具体的东西.现在有时间了,决定重头好好学一下,就从安装开始吧. 一.安装node vue是用npm安装,npm是node的一个包管理工具,所 ...

随机推荐

  1. 通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  2. android firmware 利用UDP socket发送Magic Packet--python版本

    android firmware 利用UDP socket发送Magic Packet--python版本 #!/usr/bin/python import sys, time from struct ...

  3. 利用模拟退火提高Kmeans的聚类精度

    http://www.cnblogs.com/LBSer/p/4605904.html Kmeans算法是一种非监督聚类算法,由于原理简单而在业界被广泛使用,一般在实践中遇到聚类问题往往会优先使用Km ...

  4. LoRaWAN协议&lpar;二&rpar;--LoRaWAN MAC数据包格式

    名词解析 上行:终端的数据发送经过一个或多个网关中转到达网络服务器. 下行:由网络服务器发送给终端设备,每条消息对应的终端设备是唯一确定的,而且只通过一个网关中转. LoRaWAN Classes L ...

  5. STL map 用法

    首先make_pair Pairs C++标准程序库中凡是"必须返回两个值"的函数, 也都会利用pair对象  class pair可以将两个值视为一个单元.容器类别map和mul ...

  6. &lbrack;swustoj 404&rsqb; 最小代价树

    最小代价树(0404) 问题描述 以下方法称为最小代价的字母树:给定一正整数序列,例如:4,1,2,3,在不改变数的位置的条件下把它们相加,并且用括号来标记每一次加法所得到的和. 例如:((4+1)+ ...

  7. 快速构建Windows 8风格应用1-开发工具安装及模拟器使用

    原文:快速构建Windows 8风格应用1-开发工具安装及模拟器使用 本篇博文主要介绍的是开发Windows 8风格应用中常用的两个开发工具:Visual Studio 2012和Expression ...

  8. Swap Nodes in Pairs leetcode

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  9. string赋值和操作

    string赋值 string s1; //默认构造函数,s1为空串 string s1(s2); //将s2初始化为s1的一个副本 string s3("value"); //将 ...

  10. spring boot 打jar包

    想必大家经常会出现以下报错信息 java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Fai ...

相关文章