You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import{createRouter,createWebHistory,RouteRecordRaw}from"vue-router";importHelloWorldfrom"../components/HelloWorld.vue";constroutes: Array<RouteRecordRaw> = [
{path: "/",name: "HelloWorld",component: HelloWorld,},{path: "/about",name: "About",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: ()=>import(/* webpackChunkName: "About" */"../components/About.vue")}];constrouter=createRouter({history: createWebHistory(process.env.BASE_URL),
routes,});exportdefaultrouter;
尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了。
而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。
主要是要熟练一下 Vue3,好准备用 Vue3 重构一下自己的网站项目: blog-vue-typescript ,计划是过年期间会着手重构这个项目,年后会上线。
1. 初化化项目
全局安装 vite-app
创建项目
进入项目,安装依赖
运行项目
打开浏览器 http://localhost:3000 查看
2. 引入TypeScript
加入 ts 依赖
在 项目根目录下创建 TypeScript 的配置文件 tsconfig.json
在 src 目录下新加 shim.d.ts 文件
把 main.js 修改成 main.ts
在根目录,打开 Index.html
3. 引入 eslint
安装 eslint prettier 依赖
@typescript-eslint/parser @typescr ipt-eslint/eslint-plugin
为 eslint 对 typescript 支持。在根目录下建立 eslint 配置文件: .eslintrc.js
建立 prettier.config.js
4. vue-router、vuex
4.1 vuex
在根目录下创建 store/index.ts
main.ts 修改
components/HelloWord.vue 修改
4.2 vue-router
在 src 目录下建立 router/index.ts,内容如下:
再新建一个 components/About.vue 文件,内容如下:
再修改 main.ts
再访问 http://localhost:3000/
和 http://localhost:3000/about 即可
5. 加入 Element Plus
5.1 安装 element-plus
全局安装
5.2 引入 Element Plus
你可以引入整个 Element Plus,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
完整引入
在 main.js 中写入以下内容:
以上代码便完成了 Element Plus 的引入。需要注意的是,样式文件需要单独引入。
按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
然后,将 .babelrc 修改为:
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
更详细的安装方法请看 快速上手。
5.3 全局配置
在引入 Element Plus 时,可以传入一个全局配置对象。
该对象目前支持
size
与zIndex
字段。size
用于改变组件的默认尺寸,zIndex
设置弹框的初始 z-index(默认值:2000)。按照引入 Element Plus 的方式,具体操作如下:完整引入 Element:
按需引入 Element:
按照以上设置,项目中所有拥有
size
属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。最后
至此,一个基于 Vue3 全家桶 + Vite + TypeScript + Eslint + Element Plus 的开发环境已经搭建完毕,现在就可以编写代码了。
各个组件的使用方法请参阅它们各自的文档。
不得不说 Vue3 + Element Plus + Vite + TypeScript 是真的香!
Vue3 中文文档,国内 CDN 加速版:
Element Plus 官网:
作为 2021 第 2 篇原创技术文章,质量应该还可以吧,1 月的 KPI 完成,哈哈哈 😅
参考文章:vue3 + vite + typescript + eslint + jest 项目配置实践
The text was updated successfully, but these errors were encountered: