創建項目
- 新建一個名為vue3-demo的文件夾
- 在該文件夾下運行cmd命令行窗口，執行npm init -y 快速生成一個package.json文件
- 安裝依賴webpack webpack-dev-server webpack-cli webpack-merge html-webpack-plugin vue-loader
命令如下
npm i -D webpack webpack-dev-server webpack-cli webpack-merge html-webpack-plugin vue-loader
- 在根目錄下創建webpack.base.config.js文件，內容為
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
entry: './src/main.js',
output: {
filename: 'js/[name].[hash].js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new VueLoaderPlugin()
]
}
- 在根目錄下創建webpack.dev.config.js,內容為
const path = require('path')
const WebpackMerge = require('webpack-merge')
const base = require('./webpack.base')
module.exports = WebpackMerge.merge(base, {
mode: 'development',
devServer: {
publicPath: '/',
port: '9000'
}
})
- 在package.json中創建一個命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.dev.config.js",
},
- 運行npm run dev
在運行npm run dev 時，報錯
根據報錯安裝 vue-template-compiler
npm i -D vue-template-compiler
執行npm run dev 報錯
解決辦法
package.json的內容如下
{
"name": "vue3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.dev.config.js",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.3.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.31.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"vue": "^3.0.11"
}
}
在項目中我們用到的vue-template-compiler是同vue2和vue-loader一起使用的，當我們使用vue最新版本時，在不使用vite和vue-cli時，需要和webpack正常使用，需要這么做
- 首先初始化package.json
{
"name": "vue3",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
}
package.json中設置private為true，那么npm將會拒絕發布它，這是防止意外發布私有存儲庫的方法。參考npm package.json
- 安裝最新版本的vue
依次執行命令
npm i -S vue@next
npm i -D vue-loader@next webpack webpak-dev-server webpack-cli webpack-merge
- 除此之外還需要在開發環境中安裝能夠代替vue-template-complier的包——
@vue/compiler-sfc
執行命令
npm i -D @vue/compiler-sfc
@vue/compiler-sfc(!https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc#readme)
安裝好了以后執行
npm run dev
這個時候不會報錯，打開 http://localhost:9000/，得到一個空白頁面
給App.vue填上內容
<template>
<div>hello world</div>
</template>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/main.css" />
</head>
<body>
<div id="app"></div>
<script src="/dist/main.js"></script>
</body>
</html>
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
在次執行命令
npm run dev
結果如下
當前我們只搭建了開發環境，下一節我們搭建生產環境