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官方文 ...
随机推荐
- pandas（九）数据转换
移除重复数据 dataframe中常常会出现重复行,DataFrame对象的duplicated方法返回一个布尔型的Series对象,可以表示各行是否是重复行.还有一个drop_duplicates方 ...
- http的请求流程
# !/usr/bin/env python # coding:utf-8 import socket def handle_request(client): buf = client.recv(10 ...
- bootstrap基本使用
bootstrap是封装了css和js代码实现酷炫的效果,所以使用的时候,比如说是列表效果,直接调用它本身定义的函数就ok了 静态文件 把href='..static/..'里面改为url_for静态 ...
- 解释一下python中的逻辑运算符
python中有三个逻辑运算符:and.or.not print(False and True)#False print(7<7 or True)#True print(not 2==2)#Fa ...
- 解释一下python中的赋值运算符
我们将所有的算术运算符和赋值运算符号放在一起展示 a=7 a+=1 print(a) a-=1 print(a) a*=2 print(a) a/=2 print(a) a**=2 print(a) ...
- 让Jackson JSON生成的数据包含的中文以unicode方式编码
本文出处:http://blog.csdn.net/chaijunkun/article/details/8257209,转载请注明.由于本人不定期会整理相关博文,会对相应内容作出完善.因此强烈建 ...
- Oracle数据库安全（二）资源限制于口令管理
一.资源限制与口令管理概述 1.概要文件介绍: 在Oracle数据库中,用户对数据库和系统资源使用的限制以及对用户口令的管理的是建立概要文件实现的.它是Oracle数据库安全策略的重要组成不封.每个数 ...
- javascript 中的比较大小，兼 typeof()用法
javascript中的排序: 1.不同类型 比 类型 (字符串 > 数字) 2.同类型:(字符串 比 按字母顺序 )(数字 比 大小) 测试: <!DOCTYPE html> ...
- Mysql5.7 用户与授权
mysql -uroot -proot MySQL5.7 mysql.user表没有password字段改 authentication_string: 一. 创建用户: 命令:CREATE USER ...
- ng-click得到当前元素,
直接上代码: <!DOCTYPE html> <html> <head> <title></title> <script src=&q ...