vite 构建 vue 3 + naiveui 项目

Nodejs install

Download Nodejs and install: https://nodejs.org/en/download/

set registry 使用国内源

推荐使用这种方式：
$ npm config set registry https://registry.npm.taobao.org

如果不想使用了可以还原回默认：
$ npm config set registry https://registry.npmjs.org

安装 vite 并初始化一个 vue 3 项目

https://v3.cn.vuejs.org/guide/installation.html

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线（生成的项目默认就是 vue 3 的）
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>

$ npm install

# 执行下面这个命令，就可以在控制台看到 访问 url，在浏览器中访问 Hello World! 如：http://localhost:3000/
$ npm run dev

添加 naive-ui 到项目中

这里使用 -D 而不是 --save 参数，目的是为了在打包时，按需打包引入的 ui 组件和字体图标，来达到减少体积的目的。

$ npm i -D naive-ui

# 字体
$ npm i -D vfonts

# xicons 图标
# For vue3
$ npm i -D @vicons/fluent
$ npm i -D @vicons/ionicons4
$ npm i -D @vicons/ionicons5
$ npm i -D @vicons/antd
$ npm i -D @vicons/material
$ npm i -D @vicons/fa # font awesome
$ npm i -D @vicons/tabler
$ npm i -D @vicons/carbon

# Icon utils provide a icon wrapper component for customizing color & size of the inner SVG icon.
npm i -D @vicons/utils  # vue3

图标的使用

<script setup>
import { Icon } from "@vicons/utils";
import { QqCircleFilled } from "@vicons/antd";
</script>
<template>
  <div>
    <Icon color="black" size="16"><QqCircleFilled /></Icon>
  </div>
</template>

添加其他库到项目中

# 与 vue 3 对应的版本是 vue-router 4。 vue 2 才使用 4 以下的版本。这里锁定版本号。
npm install vue-router@4 --save

npm install axios --save

# npm install dayjs --save

npm 常用命令

安装但不写入package.json
$ npm install xxx

安装并写入package.json的"dependencies"中 （-S 或 --save）
$ npm install xxx –S
$ npm install xxx –-save

安装并写入package.json的"devDependencies"中 （-D）
$ npm install xxx –D

全局安装 （-g）
$ npm install xxx -g

安装指定版本
$ npm install xxx@1.2.0

检查更新
$ npm outdated

更新指定的模块，并且可以根据作用范围在后面加上 -D、-S 或 -g
注意：指定更新需要提前修改 package.json 中的版本号。
$ npm update xxx

删除指定模块；
$ npm uninstall xxx

删除全局模块
$ npm uninstall -g xxx

查看全局安装的包
$ npm list --depth 0 -g

查看当前工程安装的包
$ npm list --depth 0