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官方文 ...
随机推荐
- Java-idea-创建maven项目，部署项目，部署服务器，简单测试
spring-boot项目创建 1.项目创建 使用Idea,File→Project→Spring initalizr,点击next,进行基本配置.此时 一个spring boot项目创建完成. 之后 ...
- 006-shiro授权
一.授权流程 二.三种授权方式 2.1.编程式:通过写if/else 授权代码块完成: Subject subject = SecurityUtils.getSubject(); if(subject ...
- Jupyter Notebook修改目标文件
默认的路径 如果没有修改配置文件,那么一般就在用户目录下面: 下面各处默认起始目标地址,以防有一天想改回来 I:\shujufenxi\python.exe I:\shujufenxi\cwp.py ...
- The 2018 ACM-ICPC上海大都会赛 J Beautiful Numbers （数位DP）
题意:求小于等于N且能被自己所有位上数之和整除的数的个数. 分析:裸的数位dp.用一个三位数组dp[i][j][k]记录:第i位,之前数位之和为j,对某个mod余数为k的状态下满足条件的个数.这里mo ...
- hadoop11----socket
package cn.itcast.bigdata.socket; import java.io.BufferedReader; import java.io.InputStream; import ...
- linux命令详解之（at）--6/24
在Linux下,有两个命令可以用来作为计划任务而执行,at:一次性定时任务计划执行crontab :每天定时任务计划执行 以下仅说一下一次性任务计划执行(at)要使用一次性任务计划,linux必须要有 ...
- 通过FFmpeg将多媒体文件解码后保存成Bmp图像（YUV420 RGB32）
/* g++ -o test test.cpp -lavformat -lavcodec -lavutil -lz -lm -lpthread -lswscale */ #include <st ...
- HTML Forms（转）
内容来自HTML Dog:http://htmldog.com/guides/html/beginner/forms/ Forms Forms被用来收集用户的输入,它们通常被作为web应用的接口. 在 ...
- SElinux 读懂.te 定义自己的 .te【转】
本文转载自:https://blog.csdn.net/kongbaidepao/article/details/61417291 一. .te 文件定义中的一些宏 1.1 unix_socket_c ...
- Linux系统下使用pwgen生成密码的使用教程
pwgen生成的密码易于记忆且相当安全.从技术上来说,容易记忆的密码不会比随机生成的密码更加安全.但是,在大多数情况下,pwgen生成的密码已经足够安全,除了网银密码等需要高安全等级的情况外.使用易于 ...