从零开始使用 Webpack 搭建 Vue3 开发环境创建项目创建项目创建项目首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件Webpack 的配置文件Webpack 的配置文件Webpack 的配置文件projectproject
project-name
+ |- index.html
|- package.json
+ |- webpack.config.js
+ |- /src
+ |- index.js
project-name
+ |- index.html
|- package.json
+ |- webpack.config.js
+ |- /src
+ |- index.jswebpack.config.jswebpack.config.js
'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {

'vue': '@vue/runtime-dom',

'vuex': 'vuex/dist/vuex.esm-bundler',

'@': path.join(__dirname, 'src')
}
},
module: {
rules: [

{

test: /\.vue$/,

use: [

{

loader: 'vue-loader'

}

]

},

{

test: /\.css$/,

use: [

{

loader: 'style-loader'

},

{

loader: 'css-loader'

}

]

},

{

test: /\.(png|jpe?g|gif)$/i,

loader: 'file-loader'

options: {

name: 'images/[name].[ext]'

}

}
]
},
plugins: [
new HtmlWebpackPlugin({

filename: 'index.html',

template: './index.html'
}),
new VueLoaderPlugin()
],
devServer: {
compress: true,
port: 8080
}
}
'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {

'vue': '@vue/runtime-dom',

'vuex': 'vuex/dist/vuex.esm-bundler',

'@': path.join(__dirname, 'src')
}
},
module: {
rules: [

{

test: /\.vue$/,

use: [

{

loader: 'vue-loader'

}

]

},

{

test: /\.css$/,

use: [

{

loader: 'style-loader'

},

{

loader: 'css-loader'

}

]

},

{

test: /\.(png|jpe?g|gif)$/i,

loader: 'file-loader'

options: {

name: 'images/[name].[ext]'

}

}
]
},
plugins: [
new HtmlWebpackPlugin({

filename: 'index.html',

template: './index.html'
}),
new VueLoaderPlugin()
],
devServer: {
compress: true,
port: 8080
}
}安装依赖安装依赖安装依赖
npm install --save-dev css-loader file-loader html-webpack-plugin style-loader vue-loader@16.0.0-beta.4 @vue/compiler-sfc webpack webpack-cli webpack-dev-server

npm install --save-dev css-loader file-loader html-webpack-plugin style-loader vue-loader@16.0.0-beta.4 @vue/compiler-sfc webpack webpack-cli webpack-dev-server


VueLoaderPlugin 的导入方式改变了

vue-loader@16.0.0-beta.4 当前需要自行指定版本

vue-template-compiler 没有了,新增了 @vue/compiler-sfc

其它都是 Webpack 基本配置
VueLoaderPlugin 的导入方式改变了vue-loader@16.0.0-beta.4 当前需要自行指定版本vue-template-compiler 没有了,新增了 @vue/compiler-sfc其它都是 Webpack 基本配置VueVue
npm install --save vue@3.0.0-beta.15 vue-router@4.0.0-alpha.13 vuex@4.0.0-beta.2

npm install --save vue@3.0.0-beta.15 vue-router@4.0.0-alpha.13 vuex@4.0.0-beta.2
当前均需要自行指定版本根组件projectproject
project-name
|- package.json
|- /src
+ |- app.vue
project-name
|- package.json
|- /src
+ |- app.vueapp.vueapp.vue



组件根元素允许为多个
组件根元素允许为多个入口文件src/index.jssrc/index.js
import { createApp } from 'vue'

import App from '@/app.vue'
import router from '@/router'
import store from '@/store'

createApp(app)
.use(router)
.use(store)
.mount('#app')
import { createApp } from 'vue'

import App from '@/app.vue'
import router from '@/router'
import store from '@/store'

createApp(app)
.use(router)
.use(store)
.mount('#app')不同于 Vue2.0 的整包导入方式,Vue3.0 采用了按需导入的方式,比如这里只导入了 createApp 这个方法,这样做的好处是可以支持 Webpack 的 treeshaking, 其它没有用到的部分将不会出现在最终打包文件中Vue3.0 的响应式系统使用了 ES2021 的 Proxy (代理),其浏览器兼容性参考 CanIUse,该特性无法兼容旧浏览器CanIUseRouterprojectproject
project-name
|- package.json
|- /src
+ |- /router
+
|- index.js
project-name
|- package.json
|- /src
+ |- /router
+
|- index.jssrc/router/index.jssrc/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
{
path: '/',
component: require('@/views/index.vue').default
},
{
path: '/about',
component: require('@/views/about.vue').default
},
{
path: '/:catchAll(.*)',
component: require('@/views/404.vue').default
}
]

const router = createRouter({
history: createWebHashHistory(),
routes
})

export default router
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
{
path: '/',
component: require('@/views/index.vue').default
},
{
path: '/about',
component: require('@/views/about.vue').default
},
{
path: '/:catchAll(.*)',
component: require('@/views/404.vue').default
}
]

const router = createRouter({
history: createWebHashHistory(),
routes
})

export default router

导入方式也为按需导入

原来的 mode 参数变为 history

除了 createWebHashHistory,还有 createWebHistory 和 createMemoryHistory

路由未匹配时使用 '/:catchAll(.*)'
导入方式也为按需导入原来的 mode 参数变为 history除了 createWebHashHistory,还有 createWebHistory 和 createMemoryHistory路由未匹配时使用 '/:catchAll(.*)'在组件中使用 router
import { useRouter } from 'vue-router'

export default {
setup() {
const router = useRouter()

// 也可以解构
const { push, go, back } = useRouter()
}
}
import { useRouter } from 'vue-router'

export default {
setup() {
const router = useRouter()

// 也可以解构
const { push, go, back } = useRouter()
}
}router 就是原来实例的 $router,也有 beforeEach, afterEach 等等方法在组件中使用 route
import { useRoute } from 'vue-router'

export default {
setup() {
const route = useRoute()
}
}
import { useRoute } from 'vue-router'

export default {
setup() {
const route = useRoute()
}
}

route 是个响应式的代理对象,和原来实例的 $route 一样,也有 query, params 等属性

不建议将 route 解构,解构后的 query, params 并不是响应式的
route 是个响应式的代理对象,和原来实例的 $route 一样,也有 query, params 等属性不建议将 route 解构,解构后的 query, params 并不是响应式的StoreStoreStoreprojectproject
project-name
|- package.json
|- /src
+ |- /store
+
|- index.js
project-name
|- package.json
|- /src
+ |- /store
+
|- index.js该文件创建并导出一个 Vuex 实例src/store/index.jssrc/store/index.js
import { createStore } from 'vuex'

const store = createStore({
state: {},
getters: {},
mutations: {},
actions: {}
})

export default store
import { createStore } from 'vuex'

const store = createStore({
state: {},
getters: {},
mutations: {},
actions: {}
})

export default store

导入方式也为按需导入

其它照旧,没有什么变化
导入方式也为按需导入其它照旧,没有什么变化在组件中使用 store
import { useStore } from 'vuex'

export default {
setup() {
const { state, getters, commit, dispatch } = useStore()

return {

state
}
}
}
import { useStore } from 'vuex'

export default {
setup() {
const { state, getters, commit, dispatch } = useStore()

return {

state
}
}
}state 是响应式的代理对象,不通过 commit 提交 mutations 而是直接修改 state 也是可以的,控制台并没有给出什么警告NPM ScriptsNPM Scripts在 package.json 文件对应的 scripts 处新增命令package.jsonpackage.json
{
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
}
{
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
}