这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情
vite构建项目
npm init vite
目录结构
├── 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
这运行速度,快的令人感动
添加全家桶工具
这里要讲到,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
也可以