webpack与vue使用
项目基本结构目录：
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>Document</title>
</head> <body>
<div id="app">
<App></App>
</div>
<script src="/dist/build.js"></script>
</body>
</html>
package.json
{
"name": "node_simple",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --config webpack.dev.js",
"build": "webpack --progress --hide-modules --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^3.4.2",
"file-loader": "^6.0.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-loader": "^15.9.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2"
}
}
webpack.common.js
var path = require('path');
var webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
output: {
path: path.resolve(__dirname, './dist'), // 项目的打包文件路径
publicPath: '/dist/', // 通过devServer访问路径
filename: 'build.js' // 打包后的文件名
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif|svg)$/,
use: 'file-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'css': [
'vue-style-loader',
'css-loader'
]
}
}
}
]
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
historyApiFallback: true,
overlay: true
},
});
webpack.prod.js
const merge = require('webpack-merge');
// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
plugins: [
// 使用了该插件后，在打包build的时候，Vue中报错"("相关
// new UglifyJSPlugin({
// sourceMap: true
// })
]
});
src/main.js
import Vue from 'vue';
var say = require('./util');
import App from './App.vue';
import './style.css'; say(); var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue2!'
},
components: { App }
});
src/style.css
body {
/* background: url('./img/1.jpg'); */
}
src/util.js
module.exports = function say() {
console.log('hello world');
}
src/App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<img :src="url" class="pic_search">
<input type="text" v-model="msg">
</div>
</template> <script>
// 说明图片也作为模块导入，不然不能查看到图片
import pic_search from './img/1.jpg';
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js',
url: pic_search
}
},
created() {
this.fetchData();
},
methods: {
getData() {
return 'grand_ranfs';
},
fetchData() {
const data = this.getData();
this.msg = data;
}
}
}
</script> <style scoped>
h1 {
color: green;
}
.pic_search {
width: 20px;
height: 20px;
}
</style>
webpack与vue使用的更多相关文章
- webpack构建vue项目（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- Vue系列之 => webpack结合vue使用
安装 npm i vue -S , 在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...
- webpack 与 vue 打包体积优化
webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒 ...
- webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- webpack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- webpack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- webpack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- webpack结合vue使用（五）
webpack结合vue使用步骤如下: 安装 vue 的包 : cnpm i vue -S 由于在 webpack 中,锐减使用 .vue 这个组件模板文件定义组件,所以需要安装能解析这种文件的第三方 ...
随机推荐
- 《GNU_makefile》第六章——变量
makefile中的变量特征和C语言中的宏一样. 变量使用 =,:=,?= 和 define 定义 一些特殊的自动化变量:$< $@ $^ $* 1.变量的引用 通过 $(VAR) 或 ${VA ...
- TCP协议原理与格式初探
目录 可靠数据传输原理 停等传输下的情况 1.经过完全可靠信道的可靠数据传输 2.经具有比特差错信道的可靠数据传输 3.经具有比特差错的丢包信道的可靠数据传输 流水线传输 1.回退N步(Go-Back ...
- eclipse 和 myeclipse 字符编码设置
需要设置的几处地方为: Window->Preferences->General ->Content Type 所有 Default encoding 设置为UTF-8 Window ...
- 【python爬虫】用requests库模拟登陆人人网
说明:以前是selenium登陆取cookie的方法比较复杂,改用这个 """ 用requests库模拟登陆人人网 """ import r ...
- Linux中Python自动输入sudo 密码
一.背景和需求 背景: 由于docker服务进程都是以root帐号的身份运行的,所以用docker跑abpred出来的文件所有者都是root, 而我作为一般用户,操作这个文件不够权限,运行代码时需要s ...
- Java编发编程 - 线程池的认识（一）
每逢面试都会询问道线程池的概念和使用,但是工作中真正的又有多少场景使用呢?相信大家都会有这样的疑问:面试选拔造汽车,实际进公司就是拧螺丝!但是真正要把这颗螺丝拧紧,拧牢,没有这些最底层的知识做铺垫你可 ...
- 我要进大厂之大数据Hadoop HDFS知识点（1）
01 我们一起学大数据 老刘今天开始了大数据Hadoop知识点的复习,Hadoop包含三个模块,这次先分享出Hadoop中的HDFS模块的基础知识点,也算是对今天复习的内容进行一次总结,希望能够给想学 ...
- java开发两年，连这些多线程知识都还没掌握，你凭什么涨薪！
并发与并行 并发:两个或者多个事件在同一时间段发生(交替执行) 并行:两个或者多个事件在同一时刻发生(cpu多核.同时执行) 线程与进程 进程:是一个内存中运行的应用程序,有自己独立的内存空间,一个应 ...
- 关于AOP思想，建议你看看这份五年开发总结的笔记，写的太详细了
前言 OOP(Object Oriented Programing)面向对象编程 以对象为基本单位进行程序开发,通过对象间的彼此协同,相互协调,完成程序的构建 POP(Producer Oriente ...
- 面试阿里，字节，美团必看的Spring的Bean管理详解
IOC容器 工厂只负责创建对象,而Spring当然不仅仅是一个对象工厂,其核心是一个对象容器,其具备控制反转的能力,所以也称为IOC容器. 帮助我们存放对象,并且管理对象,包括:创建.销毁.装配,这样 ...