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

创建Vue3项目(前端)

  1. Vue 官方文档: https://vuejs.org/
  • 进入官网后默认是Vue3版本的,可以自己从 文档/Docs 中找Vue2版本的.
  1. 安装前准备
    • 熟悉命令行 win+R 输入 cmd 打开命令行窗口
    • 已安装15.0或者更高版本的 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