vite 脚手架使用教程(一)-新建项目

2,687 阅读2分钟

这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

vite构建项目

npm init vite

image.png

目录结构

├── README.md // 说明
├── index.html // html文件
├── package.json // 项目基本信息
├── public // 公共模块
│   └── vite.svg
├── src  // 源码目录
│   ├── App.vue // 入口文件
│   ├── assets // 公共资源
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts // 入口文件,加载公共组件
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json // ts配置
├── tsconfig.node.json
└── vite.config.ts   // 项目基本信息

习惯了 vue-cil的玩家,会看到这样的目录特别的熟悉,但是又比较陌生,熟悉的是整体的项目的目录结构变化不大,陌生的是配置似乎有些不同了,特别是 html 配置,还有一些公共配置添加没有了,需要手动的去添加。

pnpm

首先这路要讲到的是,建议使用 pnpm,pnpm 的优点这里不展开描述,但是在老项目中,的确是有坑的,vue-cil3.0中,依赖安装,会报错。

全局安装

npm install pnpm -g

设置源

pnpm config get registry // 查看源
pnpm config set registry http://registry.npm.taobao.org // 切换淘宝源

很多公司会有自己的私有服务、如果统一的这是源头,将会有一些不方便,所以这里也建议使用管理工具,可以随时的切换源地址。

npm install -g nrm // 源管理工具
nrm ls // 查看源的列表
nrm use 名称 // 切换源地址

基本语法

pnpm install 包
pnpm i 包
pnpm add// -S  默认写入 dependencies
pnpm add -D    // -D devDependencies
pnpm add -g    // 全局安装
pnpm remove//移除包
pnpm remove 包 --global   //移除全局包
pnpm up                //更新所有依赖项
pnpm upgrade 包        //更新包
pnpm upgrade 包 --global   //更新全局包

运行一下

pnpm run dev

image.png

这运行速度,快的令人感动

添加全家桶工具

这里要讲到,vue 的全家桶里有什么了

 "dependencies": {
    "naive-ui": "^2.31.0", // 一个你喜欢的 vueUI 组件库 (尤大推荐)
    "axios": "^0.27.2", // 网络请求
    "dayjs": "^1.11.3", // 时间插件
    "pinia": "^2.0.14", // 状态管理 用 ts 之后你就会知道 vuex 的整体使用没有 pinia 好
    "qs": "^6.11.0", // 格式化转换
    "vue": "^3.2.25", // vue
    "vue-router": "^4.0.16" // 路由管理
  }

添加依赖关系库

新项目中可以这样添加工具库,方便之后的架构调用

例如

pnpm add vue-router -S

可以将项目整体安装完成

如果你想和我的保持一致,复制dependencies然后pnpm i也可以