Vue: webpack js basic structure
vue webpack所用基础包：
nom install vue vue-loader webpack webpack-cli webpack-dev-server vue-template-compiler
package.json:
{
"name": "vue2.x_demo",
"version": "1.0.0",
"description": "vue webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=prodction webpack --config webpack.config.js",
"start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config"
},
"keywords": [
"vue"
],
"author": "Nyan Shen",
"license": "ISC",
"dependencies": {
"vue": "^2.6.10"
},
"devDependencies": {
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.2.1"
}
}
webpack.config.js basic config:
const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDev = process.env.NODE_ENV === 'development';
const common_config = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "src/index.html"),
filename: 'index.html'
}),
new VueLoaderPlugin()
]
}
if (isDev) {
common_config.devServer = {
port: 8088,
host: '0.0.0.0',
historyApiFallback: true,
overlay: {
errors: true
},
proxy: {
'/api/*': {
target: 'localhost:12306',
changeOrigin: true
}
}
}
}
module.exports = common_config;
index.js. entry file:
import Vue from "vue";
import App from "./app.vue"; const root = document.getElementById('root'); new Vue({
render: (h) => h(App)
}).$mount(root)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000"> <title>vue Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
app.vue component
<template>
<div class="test">{{test}}</div>
</template> <script>
export default {
data() {
return {
test: "Hello Vue"
}
}
}
</script> <style>
.test {
color: red;
}
</style>
Vue: webpack js basic structure的更多相关文章
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- vue - webpack.base.conf.js
描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 'use strict' // 路径 ...
- vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大
从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...
- vue-cli & webpack & vue.config.js
vue-cli & webpack & vue.config.js configureWebpack // vue.config.js module.exports = { confi ...
- webpack.config.js和vue.config.js的区别
webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都可以使用,vue的项目可以使用,react的项目也可以使用. vue.config.js是vue ...
- vue - webpack.prod.conf.js
描述:webpack打包项目时的配置文件. 命令:yarn run build 或 npm run build 打包后,生成的文件在dist文件夹下 打包后,要在服务器环境下运行!!! 关于怎样运行, ...
- 减少打包组件vue.config.js——Webpack的externals的使用
vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...
- Vue+Webpack+Grunt集成
说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...
- vue+webpack实践
最近使用了vue来做SPA应用,记一波学习笔记. 使用vue+webpack实现前端模块化. vuejs——轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 推荐官方文档 vue.js官方文 ...
随机推荐
- Kotlin 初级读本
第一部分——快速上手第一章·启程 第二章·基本语法第三章·Kotlin 与 Java 混编 第二部分——开始学习 Kotlin第四章·Kotlin 的类特性(上)第四章·Kotlin 的类特性(下)第 ...
- MariaDB备份之XtraBackup
一.XtraBackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtrabd数据库进行热备的工具.特点: (1)备份过程快速.可靠: ...
- linux环境配置时钟同步ntpd服务
配置: 服务器1:192.168.169.139 服务器2:192.168.169.140 服务器3:192.168.169.141 目的:NTP能与互联网的时间保持同步,而且本身也是一台NTP服务器 ...
- 关闭SourceInsight的大括号自动缩进
使用Source Insight可以很好的管理项目代码,也非常便于阅读.但是,在使用Source Insight书写C语言代码时,会发现这样的问题,键入大括号之后,它会自动缩进一个制表符,这种处理跟我 ...
- Pimpl Idiom /handle body idiom
在读<Effective C++>和项目源代码时,看到pImpl Idiom.它可以用来降低文件间的编译依赖关系,通过把一个Class分成两个Class,一个只提供接口,另一个负责实现该接 ...
- webdeploy启用备份 msdeploy 启用backup
前提准备:完整安装Microsoft Web Deploy 3 下载页面:WebDeploy_amd64_zh-CN.msi msdeploy 同步站点 命令所在目录C:\Program Files\ ...
- Storm--命令行解析
strom的命令行解析 Commands: activate classpath deactivate dev-zookeeper drpc help jar kill list localconfv ...
- Django- 反向生成url
Django中提供了一个关于URL的映射的解决方案, 1.客户端的浏览器发起一个url请求,Django根据URL解析,把url中的参数捕获,调用相应的试图,获取相应的数据,然后返回给客户端显示 2. ...
- 华为交换机S5700系列配置通过STelnet登录设备示例
配置通过STelnet登录设备示例 组网图形 图1 配置用户通过STelnet登录设备组网图 在服务器端生成本地密钥对 <HUAWEI> system-view [HUAWEI] sysn ...
- mongoose@4.5.2的eachAsync bug
自称踩坑大王,幸好没有地雷,哈哈哈哈哈哈,今天用了mongoose的 eachAsync() 方法,没想到,会出现 Trace: [RangeError: Maximum call stack siz ...