快活林资源网 Design By www.csstdc.com
从零开始使用 Webpack 搭建 Vue3 开发环境
创建项目
首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件
Webpack 的配置文件
project
project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js
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/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"color: #ff0000">安装依赖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 基本配置
Vue
npm install --save vue@3.0.0-beta.15 vue-router@4.0.0-alpha.13 vuex@4.0.0-beta.2
当前均需要自行指定版本
根组件
project
project-name |- package.json |- /src + |- app.vue
app.vue
<template> <ul> <li><router-link to="/">Home</router-link></li> <li><router-link to="/about">About</router-link></li> </ul> <router-view/> </template>
- 组件根元素允许为多个
入口文件
src/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')
不同于 Vue2.0 的整包导入方式,Vue3.0 采用了按需导入的方式,比如这里只导入了 createApp 这个方法,这样做的好处是可以支持 Webpack 的 treeshaking, 其它没有用到的部分将不会出现在最终打包文件中
Vue3.0 的响应式系统使用了 ES2015 的 Proxy (代理),其浏览器兼容性参考 CanIUse,该特性无法兼容旧浏览器
Router
project
project-name |- package.json |- /src + |- /router + |- index.js
src/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
- 导入方式也为按需导入
- 原来的 mode 参数变为 history
- 除了 createWebHashHistory,还有 createWebHistory 和 createMemoryHistory
- 路由未匹配时使用 '/:catchAll(.*)'
在组件中使用 router
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() } }
- route 是个响应式的代理对象,和原来实例的 $route 一样,也有 query, params 等属性
- 不建议将 route 解构,解构后的 query, params 并不是响应式的
Store
project
project-name |- package.json |- /src + |- /store + |- index.js
该文件创建并导出一个 Vuex 实例
src/store/index.js
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 } } }
state 是响应式的代理对象,不通过 commit 提交 mutations 而是直接修改 state 也是可以的,控制台并没有给出什么警告
NPM Scripts
在 package.json 文件对应的 scripts 处新增命令
package.json
{ "scripts": { "dev": "webpack-dev-server", "build": "webpack" } }
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]