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

在看看项目结构

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.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

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

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

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

  3. vue.js应用开发笔记

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

  4. VUE + vue-cli + 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.js——webpack

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

  9. vue.js2.0新手笔记(一)——安装

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

随机推荐

  1. easyui以及js前端开发常见问题、用法整理(最重要的样式和图标自定义)

    自定义图标 iconCls 所有属性值枚举: icon-add icon-print icon-mini-add icon-cvs icon-play icon-refresh icon-edit i ...

  2. IO流-基础

    //创建输出流对象 FileWriter fw = new FileWriter("d:\\a.txt"); /* * 创建输出流对象做了哪些事情: * A:调用系统资源创建了一个 ...

  3. UVa 11997 K Smallest Sums - 优先队列

    题目大意 有k个长度为k的数组,从每个数组中选出1个数,再把这k个数进行求和,问在所有的这些和中,最小的前k个和. 考虑将前i个数组合并,保留前k个和.然后考虑将第(i + 1)个数组和它合并,保留前 ...

  4. Codeforces Round #425 (Div. 2) Problem C Strange Radiation (Codeforces 832C) - 二分答案 - 数论

    n people are standing on a coordinate axis in points with positive integer coordinates strictly less ...

  5. poj 1159 Palindrome - 动态规划

    A palindrome is a symmetrical string, that is, a string read identically from left to right as well ...

  6. An error occurred (500 Error)

    Centos7 部署知乎出现上图问题 解决方法: [root@web02 ~]# vim /etc/php.ini #修改配置文件 session.auto_start = 0 #这条设置成0 [ro ...

  7. python --- 14 递归 二分法查找

    一.递归 1.函数自己调用自己 2.官方说明最大深度1000,但跑不到1000,要看解释器, 实测998 3.使⽤递归来遍历各种树形结构 二.    二分法查找 掐头结尾取中间 ,  必须是有序序列 ...

  8. ODAC(V9.5.15) 学习笔记(三)TOraSession(3)

    3. 选项 TOraSession的Options有如下内容 名称 类型 说明 CharLength TCharLength 单个字符的长度,缺省0,表示从服务器获取对应的字符集中单个字符长度 Cha ...

  9. init: wait for '/dev/block/bootdevice/by-name/cache' timed out and took 5007ms【学习笔记】

    平台信息:内核:4.9.112系统:android one平台:qcom sdm439 作者:庄泽彬(欢迎转载,请注明作者) 一.android设备在开机的时候打印了如下的log,由于系统使用了AB分 ...

  10. Ubuntu: repository/PPA 源

    在Ubuntu中,每个PPA源是单独存放在/etc/apt/sources.list.d/文件夹中的,进入到该文件夹,使用ls命令查询即可列出当前系统添加的PPA源. 添加 sudo add-apt- ...