标签：doctype join nod theme api script rom node ntb
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": "webpack --config webpack.config.js --mode development", "start": "webpack-dev-server --config webpack.config --mode development" }, "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‘); module.exports = { 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: ‘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() ], devServer: { port: 8088, historyApiFallback: true, proxy: { ‘/api/*‘: { target: ‘localhost:12306‘, changeOrigin: true } } } }
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
标签：doctype join nod theme api script rom node ntb
原文地址：https://www.cnblogs.com/Nyan-Workflow-FC/p/10589914.html
