vue-next
vue 3版本目前還沒有正式發佈，手腳架工具尚不支持。本文是查閱資料學習vue 3（vue-next）的webpack搭建的開發環境，非vue 2版本，也非vue-cli3/4。
####引入依賴
mkdir vue-next-demo
cd vue-next-demo
cnpm init --yes
cnpm i vue@next
cnpm i webpack webpack-cli webpack-dev-server --save-dev
cnpm i html-webpack-plugin mini-css-extract-plugin css-loader --save-dev
cnpm i vue-loader@next @vue/compiler-sfc --save-dev
項目結構
+ dist
+ public
---- index.html
+ src
---- App.vue
---- main.js
- package.json
- webpack.config.js
package.json
{
"name": "vue-next-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"serve":"webpack-dev-server",
"build":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue":"^3.0.0-alpha.8"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.0-alpha.8",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"vue-loader": "^16.0.0-alpha.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config.js
const webpack =require("webpack")
const { VueLoaderPlugin } = require("vue-loader")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")
const config = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.join(__dirname, "dist")
},
devServer:{
hot:true
},
module: {
rules: [
{
test: /\.vue$/,
use: "vue-loader"
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
]
},
plugins:[
new VueLoaderPlugin(),
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template:"./public/index.html"
}),
new webpack.HotModuleReplacementPlugin()
]
}
module.exports = config
main.js
import { createApp } from "vue"
import App from "./App.vue"
const app = createApp(App)
app.mount("#app")
App.vue
<template>
<div class="App">
<span>{{ msg }}</span>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
setup() {
return {
msg: "hello world!"
};
}
});
</script>
<style>
.App {
color: blue;
}
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
安裝依賴
cnpm install
運行
cnpm run serve
打包
cnpm run build