一、检查node和npm版本

node版本 ≥ 18.0

二、项目构建

这里我采用项目构建的方式是：使用 create-vite 创建

crate-vite是vite官方提供的官方脚手架，可以创建vue、react等框架的项目模板。

• 执行命令：

npm create vue@latest

npm create 是 npm init 的别名 npm init vite@latest 同样生效

• 执行结果：

• 项目目录：

  

三、项目运行

• 命令解释

  • cd vue3-js-project：进入项目vue3-js-project的目录之中

  • npm install：安装package.json文件中的依赖包。npm 在安装依赖的时候，会在node_modules/.bin/ 目录中创建好vue-cli-service 为名的几个可执行文件。

    

  • npm run format：文件格式化

  • npm run dev：搭建脚手架环境，为开发提供调试环境

    

• 运行结果：

四、端口号

Vue3的默认端口号是“5173”。修改方式：在文件vite.config.js中添加属性port:

server: {
    port: 8080, //端口号
    host: true, //ip地址 或 '0.0.0.0' 或 "loaclhost"
    open: false, //启动后是否自动打开浏览器
    https: false, // 是否开启 https
},

按需添加字段，保存后重新运行即可：

资料来源

快速上手 | Vue.js (vuejs.org)