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. 自己定义图片的progressbar

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zpf8861/article/details/36183455 Android系统自带的Progre ...

  2. ibatis $与#的区别

    在sql配置中比如in(#rewr#) 与in ($rewr$) 在Ibatis中我们使用SqlMap进行Sql查询时需要引用参数,在参数引用中遇到的符号#和$之间的区分为,#可以进行与编译,进行类型 ...

  3. [MongoDB] 学习笔记（2）

    1. Mac 安装mongodb: 官网下载mac版mongodb,解压到本地目录,如/Applications/mongodb,注意这里的地址是根更目录下的Applications,然后在根目录下创 ...

  4. uva 11426 GCD - Extreme (II) (欧拉函数打表)

    题意:给一个N,和公式 求G(N). 分析:设F(N)= gcd(1,N)+gcd(2,N)+...gcd(N-1,N).则 G(N ) = G(N-1) + F(N). 设满足gcd(x,N) 值为 ...

  5. xx-net***简明使用教程

    简介 继psiphon3.lantern.shadowsocks后,翻 土啬 界就来个新角色:xx-net 这张图是.2016.8.30日Google最新的搜索结果,还是可以看出这款工具的火爆程度的, ...

  6. Microsoft.VisualStudio.Web.PageInspector.Loader

    未能加载文件或程序集"Microsoft.VisualStudio.Web.PageInspector.Loader, Version=1.0.0.0, Culture=neutral, P ...

  7. python 利用PIL库进行更改图片大小的操作

    python 是可以利用PIL库进行更改图片大小的操作的,当然一般情况下是不需要的,但是在一些特殊的利用场合,是需要改变图片的灰度或是大小等的操作的,其实用python更改图片的大小还是蛮简单的,只需 ...

  8. 20162326 《Java程序设计》第3周学习总结

    20162326 <Java程序设计>第3周学习总结 教材学习内容总结 这周我通过课堂学习了VIM的列编辑crtl+v,shift+i shift+a·分别是左侧插入和右侧插入.还学习了使 ...

  9. NOIP 选择客栈

    描述 丽江河边有n家很有特色的客栈,客栈按照其位置顺序从1到n编号.每家客栈都按照某一种色调进行装饰(总共k种,用整数0~ k-1表示),且每家客栈都设有一家咖啡店,每家咖啡店均有各自的最低消费. 两 ...

  10. HBase 协处理器编程详解，第二部分：客户端代码编写

    实现 Client 端代码 HBase 提供了客户端 Java 包 org.apache.hadoop.hbase.client.coprocessor.它提供以下三种方法来调用协处理器提供的服务: ...