20211221 从零开始搭建Webpack+Vue3标准开发项目
让我们来试写了一个适合工程化的、标准化的项目，主要是强调正确的目录结构应该是怎么样的，下文会做一些对比与分析
一、开发前准备
请确保您已经安装了node.js
二、创建项目
首先需要创建一个空目录，在该目录打开命令行，执行npm init命令创建一个项目，完成后会自动生成一个 package.json 文件。
D:\vue3-project>npm init
package name: (vue3-project)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\vue3-project\package.json:
{
"name": "vue3-project",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)注意：我们重新指定入口文件（entry）为main.js而不是index.js。
PS：因为很多目录下都有index.js文件，经常同时打开多个index.js文件，就会导致理解混乱，看久就审美疲劳了，搞得现在看到一个女的都觉得是美女……所以，我们遵循main.js是项目的主入口文件。
添加 Webpack 配置文件
vue3-project
|- package.json
+ |- webpack.config.js
+ |- /public
+ |- index.html
+ |- /src
+ |- main.jsWebpack 配置如下：
webpack.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/main.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'images/[name][ext]'
},
resolve: {
alias: {
'@': 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,
type: 'asset/resource'
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './public/index.html'
}),
new VueLoaderPlugin()
],
devServer: {
compress: true,
port: 8088
}
}
创建主页：
/public/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>这是标题</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
安装依赖
npm install --save-dev css-loader html-webpack-plugin style-loader vue-loader@next @vue/compiler-sfc webpack webpack-cli webpack-dev-server- VueLoaderPlugin 的导入方式改变了
- vue-loader@next 当前需要自行指定版本
- 新增了 @vue/compiler-sfc 替换原来的 vue-template-compiler
- 其它都是 Webpack 基本配置
三、安装Vue
npm install --save vue@next vue-router@next vuex@next
当前均需要自行指定版本
根目录添加文件
vue3-project
|- package.json
|- /src
+ |- app.vue/src/app.vue
<template>
<ul>
<li>
<router-link to="/">Home</router-link>
</li>
</ul>
<router-view />
</template>- 组件的根元素可以允许为多个
<router-view>是 vue-router 定义的容器组件
/src/main.js
import { createApp } from 'vue'
import App from './app.vue'
import router from './router.js'
import store from './store'
createApp(App)
.use(router)
.use(store)
.mount('#app')
不同于 Vue2.0 的整包导入方式，Vue3.0 采用了按需导入的方式，比如这里只导入了 createApp 这个方法，这样做的好处是可以支持 Webpack 的 treeshaking， 其它没有用到的部分将不会出现在最终打包文件中
createApp 方法创建了一个实例，额外的东西（router, store 等）均挂载到这个实例上，这样做的好处是不会影响到另外创建的其它实例
Vue3.0 的响应式系统使用了 ES2015 的 Proxy （代理），其浏览器兼容性参考 CanIUse，该特性无法兼容旧浏览器
四、配置Vue-Router
添加Router文件
vue3-project
|- package.json
|- /src
+ |- router.js
+ |- /pages
+ |- /home
+ |- home.vue
+ |- /error
+ |- 404.vue该文件创建并导出一个 Vue-Router实例
src/router.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
path: '/',
component: require('@/pages/home/home.vue').default
},
{
path: '/:catchAll(.*)',
component: require('@/pages/error/404.vue').default
}
]
const router = createRouter({
history: createWebHashHistory(), //除了 createWebHashHistory，还有 createWebHistory 和 createMemoryHistory
routes
})
export default router
- 导入方式也为按需导入
- 原来的
mode参数变为history - 除了 createWebHashHistory，还有 createWebHistory 和 createMemoryHistory
- 路由未匹配时使用
'/:catchAll(.*)'
PS：有的项目中，Router文件在/src/router/index.js中，多了一层目录，当路由不复杂时，放在根目录/src/router.js更加便于查找和修改。
该文件创建并导出一个home主页的Vue组件
/pages/home/home.vue
<template>
<h1>主页</h1>
</template>
<script>
import { useRouter } from 'vue-router'; // 在组件中使用 router
import { useRoute } from 'vue-router'; // 在组件中使用 route
import { useStore } from 'vuex'; // 在组件中使用 store
export default {
setup() {
const router = useRouter();
const route = useRoute();
const { state, getters, commit, dispatch } = useStore();
// 也可以解构
const { push, go, back } = useRouter();
return {
state
}
}
}
</script>
- router 就是原来实例的 $router，也有 beforeEach, afterEach 等等方法
- route 是个响应式的代理对象，和原来实例的 $route 一样，也有 query, params 等属性
- 不建议将 route 解构，解构后的 query, params 并不是响应式的
PS：有的项目中，页面文件在/src/views/下，这里改到/src/pages/下，因为在汉语翻译中，view（视图）只能表达页面中的某个部分，而page（页面）更能准确的表达这是单页面应用SPA。
该文件创建并导出一个错误页组件
/pages/error/404.vue
<template>
<h1>404 页面不存在</h1>
</template>
五、配置Vuex Store
添加Store文件
vue3-project
|- package.json
|- /src
+ |- store.js该文件创建并导出一个 Vuex 实例
src/store.js
import { createStore } from 'vuex'
const store = createStore({
state: {},
getters: {},
mutations: {},
actions: {}
})
export default store
- 导入方式也为按需导入
- 其它照旧，没有什么变化
state 是响应式的代理对象，不通过 commit 提交 mutations 而是直接修改 state 也是可以的，控制台并没有给出什么警告
六、NPM Scripts 启动本地服务
在 package.json 文件对应的 scripts 处新增命令
{
"scripts": {
"serve": "webpack serve",
"build": "webpack"
}
}执行 npm run dev 访问 localhost:8088
npm run serve完成后，package.json文件会变成这样的
{
"name": "vue3-project",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack serve",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@vue/compiler-sfc": "^3.2.26",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"vue-loader": "^17.0.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {
"vue": "^3.2.26",
"vue-router": "^4.0.12",
"vuex": "^4.0.2"
}
}
参考文献：
https://www.cnblogs.com/xyzhanjiang/p/13272975.html
从零开始使用 Webpack 搭建 Vue3 开发环境
扫一扫
1555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
