[网站开发] 创建Vue3项目及错误解决

文章总览：YuanDaiMa2048博客文章总览

---

创建Vue3项目(前端)

1. Vue 官方文档: https://vuejs.org/
   • Vuejs.org
   • 中文版Vue网站

• 进入官网后默认是Vue3版本的,可以自己从 文档/Docs 中找Vue2版本的.

2. 安装前准备

   • 熟悉命令行 win+R 输入 cmd 打开命令行窗口
   • 已安装15.0或者更高版本的 Node.js

• 关于Node.js的安装网上有教程,这里我参考的是 Node.js下载安装及环境配置教程【超详细】 ,可以根据自己需求进行选择.

1.1 环境准备

• 检查node 和npm版本信息

../>node -v
v18.17.0

../>npm -v
9.6.7

1.2 创建项目

1. 进入准备搭建 vue3 项目的相应目录，例如本例目录地址：C:\vue\vue3

   • 命令：cd C:\vue\vue3

2. 初始化创建项目(安装并执行 create-vue)

   • 命令：npm init vue@latest

3. 进行创建，官方脚手架工具

   • 进行诸如 TypeScript 和测试支持之类的可选功能提示（可以根据自己需要自行选择）：

   Project name：------》项目名称，默认值：vue-project
   Add TypeScript? ------》是否加入TypeScript组件？默认值：No。
   Add JSX Support? ------》是否加入JSX支持？默认值：No。
   Add Vue Router for Single Page Application development? ------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。
   Add Pinia for state management? ------》是否添加Pinia组件来进行状态管理？默认值：No。
   Add Vitest for Unit testing? ------》是否添加Vitest来进行单元测试？默认值：No。
   Add an End-to-End Testing Solution?------》是否添加端到端测试？默认值No。
   Add ESLint for code quality? ------》是否添加ESLint来进行代码质量检查？默认值：No。
   

   • 遇到错误

   C:\vue\vue3>npm init vue@latest
   npm ERR! code CERT_HAS_EXPIRED
   npm ERR! errno CERT_HAS_EXPIRED
   npm ERR! request to https://registry.npm.taobao.org/create-vue failed, reason: certificate has expired
   
   npm ERR! Log files were not written due to an error writing to the directory: D:\LenovoSoftstore\Install\nodejs\node_cache\_logs
   npm ERR! You can rerun the command with `--loglevel=verbose` to see the logs in your terminal
   

   • 解决：切换到管理员模式运行该条命令，会要求下载 create-vue@3.9.2 可能是npm更新的问题

4. 创建项目完整信息如下（示例，具体功能可根据自身需求设置）：

   C:\>cd C:\vue\vue3
   
   C:\vue\vue3>npm init vue@latest
   Need to install the following packages:
   create-vue@3.9.2
   Ok to proceed? (y) y
   
   Vue.js - The Progressive JavaScript Framework
   
   √ 请输入项目名称： ... FirstProject
   √ 请输入包名称： ... firstproject
   √ 是否使用 TypeScript 语法？ ... 否
   √ 是否启用 JSX 支持？ ... 否
   √ 是否引入 Vue Router 进行单页面应用开发？ ... 是
   √ 是否引入 Pinia 用于状态管理？ ... 是
   √ 是否引入 Vitest 用于单元测试？ ... 否
   √ 是否要引入一款端到端（End to End）测试工具？ » 不需要
   √ 是否引入 ESLint 用于代码质量检测？ ... 是
   √ 是否引入 Prettier 用于代码格式化？ ... 是
   
   正在构建项目 C:\vue\vue3\FirstProject...
   
   项目构建完成，可执行以下命令：
   
   cd FirstProject
   npm install
   npm run format
   npm run dev
   
   npm notice
   npm notice New major version of npm available! 9.6.7 -> 10.4.0
   npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
   npm notice Run npm install -g npm@10.4.0 to update!
   npm notice
   
   C:\vue\vue3>
   

5. 启动项目

   • cd FirstBlogProject
   • npm install
     • 速度慢的话可以用 cnpm install 利用镜像下载(当然需要提前下载好cnpm,参考node.js安装)
   • npm run format
   • npm run dev
   • 结束：ctrl+c