Vue3+vite+ts构建前端工程化项目 |
您所在的位置:网站首页 › 前端框架结构 › Vue3+vite+ts构建前端工程化项目 |
前言
在开始之前,我们应该有一个共识,任何新技术,官方文档都优于任何博客,所以在学习之前,强烈建议你好好地阅读官方文档,在本篇文章的实践中,应该看的是 vite 官网。 下面记录一下怎么使用Vue3 + ts + vite 搭建一个项目 一、基础环境和工具使用 pnpm 代替 npm 建议使用 pnpm 代替 npm,pnpm 速度更快。 pnpm 的用法和 npm 一致,唯一的区别是 npm 是 node 自带的包管理工具,所以在安装好 node 之后就可以使用 npm。但是 pnpm 在首次使用之前需要用 npm 全局安装 npm i pnpm -g pnpm -v 查看版本 使用 pinia 代替 vuex Pinia 是Vue 的专属状态管理库,用法简单,可以尝试使用 pinia 代替 vuex 二、vite环境搭建,构建vite-vue-ts项目 2.1 使用命令初始化项目打开 vite 的官网,依照指示使用命令行,初始化一个 vite 作为打包工具的项目 打开命令行,运行如下命令,使用 vue + ts 的模板,创建一个名称为 vite-vue-ts 的项目 pnpm create vite@latest vite-vue-ts --template vue 初始化项目: pnpm install 启动项目: pnpm run dev 2.2增加 .nvmrc在项目的根目录,新建 .nvmrc 文件,输入初始化时 node 的版本号,用来避免每次切换项目都手动切换 node 版本,新增后重启VSCode 2.3## 增加工程化插件项目已经初步成型,下面我们需要增加一些提高我们工作效率的插件 2.3.1 使用 scss其实现在我们的项目已经完全可以运行起来了,但是项目中有一个 style.css 显然不是我们想要的,vite可以原生的支持 scss 文件,我们一般都是使用 scss 写样式。 pnpm add -D sass 增加 -D 参数,在开发环境中才使用 sass,因为生产环境,scss 文件会被编译成 css 文件,这个插件是用不到的 增加 common.scss 文件,并在 main.ts 中引入 2.3.2 安装 routerpnpm install vue-router@4 main.ts: import router from "./router/index"; const app= createApp(App) app.use(router) 创建router目录及index.ts文件 2.3.3 安装piniapnpm install pinia main.ts: import { createPinia } from 'pinia' const pinia = createPinia() const app= createApp(App) app.use(pinia) src目录下创建index.ts文件: 组件中调用: 引入 import { useMain } from '../store/home' import { storeToRefs } from 'pinia'; 结构 const main = useUser() 响应式结构,可直接修改数据 const { counter,name ,doubleCount } = storeToRefs(main) 调用方法 main.increment() 使用$patch,批量修改 2.3.4 引入 Element Pluspnpm install element-plus --save pnpm install @element-plus/icons-vue 安装unplugin-vue-components 和 unplugin-auto-import插件 pnpm install -D unplugin-vue-components unplugin-auto-import vite.config.ts: 如有出现错误,希望大家多多指正,谢谢大家! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |