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的更多相关文章

  1. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  2. vue - webpack.base.conf.js

    描述:webapck基本配置文件. 为了给开发文件和打包文件(webpack.dev.conf.js|| webpack.prod.conf.js) 提供方便. 'use strict' // 路径 ...

  3. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  4. vue-cli & webpack & vue.config.js

    vue-cli & webpack & vue.config.js configureWebpack // vue.config.js module.exports = { confi ...

  5. webpack.config.js和vue.config.js的区别

    webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都可以使用,vue的项目可以使用,react的项目也可以使用. vue.config.js是vue ...

  6. vue - webpack.prod.conf.js

    描述:webpack打包项目时的配置文件. 命令:yarn run build 或 npm run build 打包后,生成的文件在dist文件夹下 打包后,要在服务器环境下运行!!! 关于怎样运行, ...

  7. 减少打包组件vue.config.js——Webpack的externals的使用

    vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...

  8. Vue+Webpack+Grunt集成

    说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...

  9. vue+webpack实践

    最近使用了vue来做SPA应用,记一波学习笔记. 使用vue+webpack实现前端模块化. vuejs——轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 推荐官方文档 vue.js官方文 ...

随机推荐

  1. mysql 从零学习

    一 .下载MySQL 访问MySQL的官网http://www.mysql.com/downloads/ 然后在页面中会看到“MySQL Community Server”下方有一个“download ...

  2. cas无缝单点登录(原创)

    之前一直有一个问题残绕着自己,今天,终于很粗糙的解决了这个问题. 众所周知,按照cas单点登录,默认情况下,在不登录的情况下,打开网站是必须要跳转到登录页面的.那有什么方法可以控制吗,当然有,很简单, ...

  3. 算法:LRU(最近最少使用)

    算法:LRU(最近最少使用) 本文参考自小灰文章:https://mp.weixin.qq.com/s/B5xiVeW22ZumbI9KfrYJSg LRU算法 什么是LRU算法 LRU算法又称最近最 ...

  4. html 基础--一般标签

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  5. Connection.setAutoCommit使用的注意事项

    http://blog.csdn.net/xiayimiaokuaile/article/details/6422032 setAutoCommit总的来说就是保持数据的完整性,一个系统的更新操作可能 ...

  6. 2018年Java面试题搜集

    2018年Java面试题搜集 一.Servlet执行流程(浏览器访问servlet的过程容器) 客户端发起http请求,web服务器将请求发送到servlet容器,servlet容器解析url并根据w ...

  7. Java:判断字符串是否为数字的五种方法

    Java:判断字符串是否为数字的五种方法 //方法一:用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = str. ...

  8. Apache 浏览器访问限制配置

    浏览器访问限制配置 user_agent收入的浏览器中,我们通过百度,谷歌很容易就可以查到相关的一些资料,方便了我们对知识的查找,但在某些特定情况下,我们并不希望有人可以通过某写搜索引擎直接访问到我们 ...

  9. Ubuntu 14.04上架IPSec+L2TP的方法

    最简单的方法是使用脚本一步一步地进行配置.我用的是philplckthun写的脚本,修改了一下获取服务器IP的方法:脚本文件. 在ubuntu下运行: sh setup.sh 配置配置完成后,服务器端 ...

  10. 2018-2019-2 20165114《网络对抗技术》Exp5 MSF基础应用

    Exp5 MSF基础应用 目录 一.实验目标 二.基础问题回答 三.实验过程记录 3.1主动攻击实践 ms08_067+generic/shell reverse_tcp ms17_010_etern ...