vue vite创建项目步骤 及安装 pnpm

1. 创建vue项目

node版本需18以上 不然报错

npm init vue@latest

2. 项目配置

  • 配置项目的icon
  • 配置项目的标题
  • 配置jsconfig.json

3. 项目目录结构划分

在这里插入图片描述
在这里插入图片描述

4.css样式的重置

npm install normalize.css

在这里插入图片描述
在这里插入图片描述

reset.css

html {
  line-height: 1.2;
}

body,
h1,
h2,
h3,
h4,
ul,
li {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: top;
}

5.路由配置

6 备注

安装 pnpm,提升依赖的安装速度

npm config set registry https://registry.npmmirror.com
npm install -g pnpm

安装依赖

pnpm install

启动服务

npm run dev
### 如何运行 pnpm 开发服务器 要启动开发服务器,通常需要依赖于项目中的脚本配置。大多数情况下,在 `package.json` 文件中会定义一个名为 `"dev"` 的脚本,用于启动开发环境的服务。 以下是具体操作方法: #### 使用默认的 `dev` 脚本 如果项目的 `package.json` 中已经预设了一个 `dev` 脚本,则可以使用以下命令来启动开发服务器: ```bash pnpm run dev ``` 此命令会在当前目录下查找 `package.json` 并执行其中定义的 `dev` 脚本[^1]。 #### 自定义脚本名称 如果没有预先设置好的 `dev` 脚本,或者开发者自定义了其他名称(比如 `start-server`),则需要查看 `package.json` 文件中的 `scripts` 部分以确认实际使用的脚本名称。假设脚本被命名为 `start-dev`,那么应该运行如下命令: ```bash pnpm run start-dev ``` #### 安装必要的依赖项 在尝试运行任何脚本之前,请确保所有的必要依赖都已正确安装。这可以通过以下命令完成: ```bash pnpm install ``` 该命令将解析并下载 `package.json` 所需的所有依赖关系,并将其存储在一个高效的空间节省结构中[^3]。 #### 示例代码片段 下面是一个典型的 `package.json` 文件示例,展示了如何配置 `dev` 脚本来启动 Webpack 或 Vite 等开发服务器: ```json { "name": "example-project", "version": "1.0.0", "private": true, "scripts": { "dev": "vite", // 启动Vite开发服务 "build": "vite build" }, "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" } } ``` 通过上述配置文件,你可以简单地输入 `pnpm run dev` 来启动基于 Vite 构建工具的开发服务器。 --- #### 注意事项 - 如果遇到错误提示关于全局 CLI 工具版本过低的情况,可参照说明升级至最新版 ros-cdk-cli 至少到 1.0.50 及以上版本[^2]。 - 对于更复杂的多包管理场景,可能需要用到过滤器选项,例如仅针对某个子模块运行测试或构建任务时,可以利用 `--filter` 参数。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值