好的微信小程序_使用Webpack 搭建 Vue3 开发环境过

使用Webpack 搭建 Vue3 开发环境过程详解     .Genesis   这篇文章主要介绍了使用Webpack 搭建 Vue3 开发环境过程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

创建项目

首先需要创建一个空目录，在该目录打开命令行，执行 npm init 命令创建一个项目，这个过程会提示输入一些内容，完成后会自动生成一个 package.json 文件

Webpack 的配置文件

project

 project-name
+ |- 
 |- 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 g|gif)$/i,
 loader: 'file-loader'
 options: {
 name: 'images/[name].[ext]'
 plugins: [
 new HtmlWebpackPlugin({
 ',
 '
 new VueLoaderPlugin()
 devServer: {
 compress: true,
 port: 8080
}

安装依赖

npm install --save-dev css-loader file-loader html-webpack-plugin style-loader vue-.0-beta.4 piler-sfc webpack webpack-cli webpack-dev-server

vue-.0-beta.4 当前需要自行指定版本 piler 没有了，新增了 piler-sfc 其它都是 Webpack 基本配置

Vue

npm install --save .0-beta.15 vue-.0-alpha.13 .0-beta.2

当前均需要自行指定版本

根组件

project

 project-name
 |- package.json
 |- /src
+ |- app.vue

app.vue

 template 
 li router-link to="/" Home /router-link /li 
 li router-link to="/about" About /router-link /li 
 /ul 
 router-view/ 
 /template 

不同于 Vue2.0 的整包导入方式，Vue3.0 采用了按需导入的方式，比如这里只导入了 createApp 这个方法，这样做的好处是可以支持 Webpack 的 treeshaking， 其它没有用到的部分将不会出现在最终打包文件中

Vue3.0 的响应式系统使用了 ES2015 的 Proxy （代理），其浏览器兼容性参考 ，该特性无法兼容旧浏览器

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

state mit 提交 mutations 而是直接修改 state 也是可以的，控制台并没有给出什么警告

NPM Scripts

在 package.json 文件对应的 scripts 处新增命令

package.json

 "scripts": {
 "dev": "webpack-dev-server",
 "build": "webpack"
}

到此这篇关于使用Webpack 搭建 Vue3 开发环境过程详解的文章就介绍到这了,更多相关Webpack 搭建 Vue3 开发环境内容请搜索凡科以前的文章或继续浏览下面的