03的开发日志
0%

Node.js快速创建Vue3项目

发表于 分类于
本文字数： 1.2k 阅读时长 ≈ 1 分钟
  1. 安装与初始化
  2. package.json的证书字段
  3. 开发
  4. 构建

安装与初始化

vuejs/create-vue: 🛠️ Quickly scaffold a Vue project with npm init vue@3 (github.com)

1
npm init vue@3

执行命令后，填写项目名称，并选择一些依赖的选项，选择完成后即可初始化成功。

进入目录，安装相关的依赖：

1
yarn  # or `npm i`

在package.json中可以看到该项目依赖Vite.js作为编译和开发工具，字段scripts包含了一些构建、预览的命令（npm run [script]oryarn [script]）：

1
2
3
4
5
6
7
8
"scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
},

默认情况下，dev表示热更新开发环境，build启动构建，preview启动构建结果目录的静态服务器，其他几个命令与类型检查有关，用得较少。

package.json的证书字段

如果不想授权其他人使用，设置为：

1
"license": "UNLICENSED"

或者申请一个填入（与README.md中对应）

开发

1
2
3
yarn dev
# or `npm run dev`
# or `npx vite`

部署到公网环境，加上--host

1
yarn dev --host

构建

1
2
3
4
yarn build
# or `npm run build`
# or `npx vite build`  # 直接构建
# or `npx run-p type-check build-only`  # 带类型检查的构建

构建配置在vite.config.ts中（配置参考）

base设置开发或生产环境下的基础公共路径，默认/，可以是/foo/、http://foo.com/、./或空字符串；

build.outDir设置输出路径，默认dist，相对于项目根目录（由root配置）

build.assetsDir设置静态资源文件夹，默认assets，相对于build.outDir

image-20220602164820898

dist文件夹内容：

image-20220602164702668