开心每一天

Appearance

vite 构建 vue 3 + element-plus 项目 ​

Nodejs install ​

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

set registry 使用 taobao 源 ​

txt
推荐使用这种方式：
$ 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

bash
# 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

不想用 npm 也可以使用 yarn：

bash
$ yarn create vite <project-name> --template vue
$ cd <project-name>

$ yarn
$ yarn dev

添加 Element-Plus 到项目中 ​

bash
# 选择一个你喜欢的包管理器(npm 或 yarn)
# NPM
#$ npm install element-plus --save
$ npm i -D element-plus

添加其他库到项目中（yarn 命令参考上面，不再重复书写） ​

bash
# Font Icon has been removed, since element-plus version 1.2.0-beta.1
# 现在使用的是 SVG Icon。要使用的话需要额外添加
npm install @element-plus/icons-vue --save

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

# font-awesome 4
npm install font-awesome --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