vite初始化创建vue3项目

vite初始化创建vue3项目

一、npm安装yarn

在 Yarn 中文网可以找到 window 下有三种安装方法

快速好用的安装方法应该还是使用 npm 来安装

1.1、安装node.js

node.js官网

1.2、使用npm 安装 yarn或cnpm

关于为什么使用 -g，以及 -g 会带来哪来影响，
这个可以看下边这篇文章，里面详细介绍了为什么要使用 -g，以及 -g 的作用

npm install -g yarn --registry=https://registry.npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

1. 检查是否安装成功

yarn --version

cnpm --version

2. 查看 yarn 配置

yarn config get registry
或者
yarn config list

> registry: 'https://registry.yarnpkg.com'

1.3、换淘宝镜像源

cnpm安装淘宝镜像

cnpm config set registry https://registry.npm.taobao.org

yarn安装淘宝镜像

yarn config set registry https://registry.npm.taobao.org

1.4、yarn 常用命令

npm init === yarn init === cnpm init

npm install === yarn 或者 yarn install === cnpm install

npm install taco --save === yarn add taco === cnpm install taco --save

npm uninstall taco --save === yarn remove taco === npm uninstall taco --save

npm install taco --save-dev === yarn add taco --dev === cnpm install taco --save-dev

npm update --save === yarn upgrade === cnpm update --save

npm install taco@latest --save === yarn add taco === cnpm install taco@latest --save 

npm install taco --global === yarn global add taco === cnpm install taco --global

npm init --yes/-y === yarn init --yes/-y === cnpm init --yes/-y

npm link === yarn link === cnpm link

npm outdated === yarn outdated === cnpm outdated

npm publish === yarn publish === cnpm publish

npm run === yarn run === cnpm run

npm cache clean === yarn cache clean === cnpm cache clean

npm login === yarn login === cnpm login

npm test === yarn test === cnpm test

初始化项目:
yarn init // 同npm init，执行输入信息后，会生成package.json文件

yarn的配置项：
yarn config list // 显示所有配置项
yarn config get <key> //显示某配置项
yarn config delete <key> //删除某配置项
yarn config set <key> <value> [-g|--global] //设置配置项

安装包：
yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock

添加包（会更新package.json和yarn.lock）：
yarn add [package] // 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version] // 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）

//不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
yarn add --dev/-D // 加到 devDependencies
yarn add --peer/-P // 加到 peerDependencies
yarn add --optional/-O // 加到 optionalDependencies

//默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0

发布包
yarn publish

移除一个包
yarn remove <packageName>：移除一个包，会自动更新package.json和yarn.lock

更新一个依赖
yarn upgrade 用于更新包到基于规范范围的最新版本

运行脚本
yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本

显示某个包的信息
yarn info <packageName> 可以用来查看某个模块的最新版本信息

缓存
yarn cache
yarn cache list # 列出已缓存的每个包 yarn cache dir # 返回 全局缓存位置 yarn cache clean # 清除缓存

二、Vite初始化vue3项目 (推荐)

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目，语法格式如下：

npm init vite-app <project-name>

2.1、创建项目

npm init vite-app vue3-vite

2.2、运行项目

cd vue3-vite
npm install /cnpm install /yarn
npm run dev /cnpm run dev /yarn dev


> Network:  http://192.168.254.145:3000/
> Local:    http://localhost:3000/

三、注意

如果通过 yarn i 或者 cnpm i 下载依赖不报错，但是执行 yarn dev 或者 cnpm run dev 运行就报错，
那就用下面的方法：

建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug，可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev