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官方文 ...
随机推荐
- Oracle 11g数据库详解
常见异常: ORA-14025:不能为实体化视图或实体化视图日志指定PARTITION ORA-14026:PARTITION和CLUSTER子句互相排斥 ORA-14027:仅可以指定一个PARTI ...
- Mysql学习笔记—视图
1.什么是视图 视图(View)是一种虚拟存在的表.其内容与真实的表相似,包含一系列带有名称的列和行数据.但是视图并不在数据库中以存储的数据的形式存在.行和列的数据来自定义视图时查询所引用的基本表,并 ...
- 用仿ActionScript的语法来编写html5——第五篇，Graphics绘图
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个G ...
- django下的csrf防御机制
CSRF 1.什么是CSRF? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写 ...
- FPGA电源设计
LDO(低压差线性稳压器),FPGA需要3.3V.2.5V和1.2V,可选用凌力尔特LINEAR:LT1083/84/85,低压差正压可调稳压器. 应用电路如图所示: 输入端加10UF电解电容,输出端 ...
- java项目地址和服务器地址区分
项目地址String filePath = request.getSession().getServletContext().getRealPath("/") + "up ...
- Sublime Text Shortcuts
Keyboard Shortcuts - Windows/Linux Warning This topic is a draft and may contain wrong information. ...
- React Native之持久化存储（AsyncStorage、react-native-storage）的使用
AsyncStorage是一个简单的.异步的.持久化的Key-Value存储系统,它对于App来说是全局性的.这是官网上对它的介绍.可以知道,这个asyncstorage也是以键值对的形式进行存储数据 ...
- CA认证_demo
CA认证,即电子认证服务 [1] ,是指为电子签名相关各方提供真实性.可靠性验证的活动. 证书颁发机构(CA, Certificate Authority)即颁发数字证书的机构.是负责发放和管理数字 ...
- MySql 查询数据库中所有表名以及对比分布式库中字段和表的不同
查询数据库中所有表名select table_name from information_schema.tables where table_schema='数据库名' and table_type= ...