Vue3.0 已经发布一段时间了,特别是还发布了一个打包构建工具 Vite,听说是能够干掉 webpack 的,趁这段时间有空,本人也体验了一下。css
想使用 Vue3.0 不必定要用 Vite,vue-cli 也能够构建。检查一下 CLI 版本,确保升到4以上,而后执行 vue create xxx
会出现几个选项,选第二个就能够建立 Vue3 项目。html
使用 CLI 构建的项目仍是使用 webpack 进行打包的,这里就不展开了。这里介绍下用 vite 构建。首先安装 vite 构建工具:vue
$ npm install -g create-vite-app
建立项目:node
# 下面两个命令均可以 $ create-vite-app vue3-demo $ cva vue3-demo
跟 CLI 不同,vite 目前没有提供命令行交互的选项,就是按照默认的模板进行建立的。CLI 建立项目会自动从 npm 拉取依赖,而 vite 建立项目没有拉取依赖,所以执行命令以后很快就建立完成了。webpack
建立完成的项目结构是这样的:ios
package.json
中能够看到依赖很是少,只有 vite
和 @vue/compiler-sfc
,没有 babel,由于 vite 是经过浏览器去解析模块。nginx
接下来手动拉一下依赖:git
$ npm install
而后启动项目:github
$ npm run dev
简直就是秒开,不用打包实在快!注意 vite dev server 默认端口是3000,这边改成了 8000 端口,后面会讲怎么改配置。web
如今的项目只能用来写写 HelloWorld,还不可以进行实际的开发,下面来介绍一下项目配置。
查看 vue-router 版本:
$ npm info vue-router versions
直接安装最新版 vue-router:
$ npm install vue-router@4.0.3
在 src 目录下建立如下目录:
- src |- router | |- index.js |- views |- Home.vue |- Contact.vue
在 index.js
中添加以下代码:
import { createRouter, createWebHistory } from 'vue-router' // 开启历史模式 // vue2中使用 mode: history 实现 const routerHistory = createWebHistory(); const router = createRouter({ history: routerHistory, routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: () => import('../views/Home.vue') }, { path: '/contact', component: () => import('../views/Contact.vue') } ] }) export default router
而后在 App.vue
中添加以下代码进行测试:
<template> <img alt="Vue logo" src="./assets/logo.png" /> <div class="nav-btn"> <router-link to='/'> Home</router-link> <router-link to='/contact'>Contact </router-link> </div> <router-view></router-view> </template> <script> export default { } </script>
点击Home和Contact,路由发生变化,同时组件切换
执行下面的命令,等待安装完成就能够使用了,不用在 main.js 中引入
$ npm install less less-loader --dev
注意这里有个坑,less 和 less-loader 须要写到 devDependencies 里面,下面的命令会把依赖写到 dependencies 里面,项目运行会报错
# 下面两个命令是同样的,都是写到 dependencies $ npm install less less-loader $ npm install less less-loader --save
根目录下建立 vite.config.js
,添加配置:
const path = require('path') module.exports = { alias: { '/@/': path.resolve(__dirname, './src') }, hostname: '0.0.0.0', // 默认是 localhost port: '8000', // 默认是 3000 端口 open: true, // 浏览器自动打开 https: false, // 是否开启 https ssr: false, // 服务端渲染 base: './', // 生产环境下的公共路径 outDir: 'dist', // 打包构建输出路径,默认 dist ,若是路径存在,构建以前会被删除 proxy: { // 本地开发环境经过代理实现跨域,生产环境使用 nginx 转发 '/api': { target: 'http://127.0.0.1:7001', // 后端服务实际地址 changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }
这边也有一个坑,模块路径别名必须以 /
开头和结尾,不然 vite 没法识别。
执行下面的命令进行安装:
$ npm install element-plus
这边采用所有引入的方式,在 main.js
中添加以下代码:
import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router' import ElementPlus from 'element-plus' // 这边引入 element-plus const app = createApp(App) app.use(ElementPlus) // 使用 element-plus app.use(router) app.mount('#app')
这样搞了以后发现样式没引进来,多是由于 beta 版的缘由,那就手动引入样式:
import 'element-plus/lib/theme-chalk/index.css'
结果 vite 在打包的时候报错了:
[vite] Failed to resolve module import "element-plus/lib/theme-chalk/index.cssoduleselement-pluslibheme-chalkindex.css". (imported by /src/main.js)
到 node_modules 里面找了下,模块路径没问题,为何仍是没法解析模块呢?试了下右键查看源代码:
<!DOCTYPE html> <html lang="en"> <head> <script type="module">import "/vite/client"</script> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>
这里能够看到引入了 main.js
,打开这个文件看下:
import { createApp } from '/@modules/vue.js' import App from '/@/App.vue' import '/@/index.css?import' import router from '/@/router/index.js' import ElementPlus from '/@modules/element-plus.js' // import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.use(router) app.mount('#app')
能够看到全部 js 文件通过 vite 处理后,模块路径都被修改了,从 node_modules 引入的模块前面都被加了 /@modules
,而 src 目录下引入的模块被加了 /@
,由此获得启发:
import '/@modules/element-plus/lib/theme-chalk/index.css'
这边确实是个坑,总结一下:
// 模块路径前面有 ./ 的解析为从 ./src 目录下引入的模块 './index.css' => '/@/index.css' // 没有模块路径的解析为从 node_modules 引入的模块 'vue' => '/@modules/vue.js' 'element-plus' => '/@modules/element-plus.js' // 下面两种能够在 webpack 构建的项目使用,可是 vite 是没法解析的 'index.css' 'element-plus/lib/theme-chalk/index.css'
Element plus 官方文档
Element plus 国内镜像
查看 vuex 版本:
$ npm info vuex versions
直接安装最新版 vuex:
$ npm install vuex@4.0.0-rc.2
在 src 目录下建立 store
目录,在里面建立几个文件:
- store |- state.js |- getters.js |- mutations.js |- actions.js |- index.js
写入以下内容:
// state.js let state = {} export default state // getters.js let getters = {} export default getters // mutations.js let mutations = {} export default mutations // actions.js let actions = {} export default actions // index.js import { createStore } from 'vuex' import state from './state' import getters from './getters' import mutations from './mutations' import actions from './actions' export default createStore({ state, getters, mutations, actions })
而后在 main.js
中使用 vuex :
import { createApp } from 'vue' import App from './App.vue' import './index.css' import router from './router' import store from './store' // 引入 vuex import ElementPlus from 'element-plus' import '/@modules/element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus) app.use(router) app.use(store) // 使用 vuex app.mount('#app')
测试一下,在 state.js
里面加一句:
let state = { username: 'admin'; }
页面组件里面写一个方法:
methods: { handleButtonEvent() { this.$message.success(this.$store.state.username) } }
成功获取到 username
顺便还测了一下 element-plus 组件
安装 axios:
$ npm install axios
在 src 目录下建立两个目录:
- src |- api | |- systemInfo.js |- utils |- request.js
在 request.js
中添加如下代码:
import axios from 'axios' const service = axios.create({ baseURL: '/', timeout: 1000000, // 请求超时时间 }) export default service
关于 axios 的封装这里不详细展开
而后在 systemInfo.js
中添加如下代码:
import request from '/@/utils/request' let systemInfo = {}; systemInfo.login = function(data) { return request({ url: '/api/fin-services/v1/system-info/login', data, method: 'post' }) } export default systemInfo
在接口请求以前,确保 vite.config.js
中设置了代理,不然跨域请求会被浏览器同源策略阻止:
const path = require('path') module.exports = { alias: { '/@/': path.resolve(__dirname, './src') }, proxy: { '/api': { target: 'http://127.0.0.1:7001', // 后端实际地址 changeOrigin: true, } } }
后端若是响应头设置了 ACAO 也能够不用代理
通过这样配置以后,你会看到浏览器发送的地址是:
http://localhost:8000/api/fin-services/v1/system-info/login
这个地址会被 vite 内置的 koa-proxies
转发给实际后端地址:
http://127.0.0.1:7001/api/fin-services/v1/system-info/login
能够参考:https://github.com/vitejs/vit...
下一篇教程会分享如何使用 Vue3.0 风格的 api 进行开发,敬请期待!