本文档将指导你使用 Node.js 和 npm 安装和配置 Vue 3 项目。

安装 Vue CLI

你需要安装 Vue CLI。VueCLI 是一个用于创建和管理 Vue.js 应用程序的脚手架工具。

npm install -g @vue/cli
  

创建项目

安装 Vue CLI 后，你可以通过运行以下命令创建一个新的 Vue 项目：

vue create my-project
  

这将创建一个名为 my-project 的新目录。

项目结构

新创建的 Vue 项目具有以下目录结构：

• node_modules : 存放项目依赖项
• package.json : 包含项目配置信息
• src : 包含源代码
• public : 包含静态文件

开发

要运行项目，请执行以下命令：

npm run serve
  

这将启动开发服务器，默认情况下会在 上运行。

构建

要构建项目以进行生产，请执行以下命令：

npm run build
  

这将在 dist 目录中创建一个构建版本。

其他配置

创建项目时，你可以通过回答一系列提示来配置以下选项：

• 项目名称
• 是否使用 TypeScript
• 是否启用 JSX 支持
• 是否包括 Vue Router
• 是否包括 Pinia
• 是否包括 Vitest
• 是否包括端到端测试工具
• 是否包括 ESLint
• 是否包括 Prettier

其他资源

• Vue.js 官方网站
• Vue CLI 文档
• Vite 文档

国内镜像站设置

为了加快组件下载速度，可以设置国内镜像站：

设置镜像（淘宝镜像最新地址）

npm config set registry

还原镜像地址为默认地址

npm config set registry

获取镜像地址

npm config get registry
  

关于vue3+ts+element-plus项目的初次踩坑

搭建一个vue3,ts,element-plus项目时，总有一些莫名其妙的问题。

项目创建完成之后，elemen文件：

src/plugins/ 这个文件是选择了按需导入，之后脚手架自动创建的。

脚手架在中引入的这个文件会报错，这时候我纳闷的是，既然是脚手架搭建的项目，初次启动项目应该没有问题，但是事与愿违，一堆警告,还无从下手，于是跟着网上的资料，把文件后缀名改成了ts,貌似参数app这个地方行不通，于是又加了个类型限制 app: any ,是能通了但是，控制台有许多警告信息，揪心。，这只是坑一

Language support for Vue 3 我在vscode中安装了这个插件：据说是vue的新一代插件，集成了vetur的相关功能，如高亮、语法提示等

构建实用VUE3项目

还没用几天VUE，就到3了，本文旨在记录构建一个实用项目模板昂。 1、自然是将VUE-CLI升级到最新版本啦（卸载旧的，安装zhui新的） npm uninstall -g vue-clinpm install -g @vue/cli 你要是想看看脚手架的版本，那敲这个 vue --version 2、构建你的项目吧 vue create myproject 进入配置的时候问你愿不愿意，你打YES就好 还有就是，既然想要VUE3的，记得选VUE3就好 到了这儿，一个原始的项目就有啦。 3、在项目目录中，建一个名叫的文件，并且在这个文件里导出一个对象。 至于这个对象里的选项和配的值，那就又可以写一篇了 4、配置路由（和子路由） 1）安装好路由插件cnpm i vue-router@next -D 2）在src目录下创建router/ 3）在根目录的里面引入路由import router from ./router 4) 在Vue对象中加入router的配置import Vue from vue import VueRouter from vue-router import Login from ../views/ (VueRouter)const routes = [{ path: /, redirect: /login},{ path: /login, name: Login, component: Login},{ path: /, component: resolve => require([../views/], resolve), redirect: /home, children: [{ path: home, name: home, component: resolve => require([../views/home/], resolve), meta: { title: 首页}},{ path: /programCard, name: programCard, component: resolve => require([../views/programCard/], resolve), meta: { title: 路由1}} ]} ] const router = new VueRouter({mode: hash,base: _URL,routes }) export default router 5、安装VUEX并使用 1)安装vuex cnpm i vuex@next -D 2）在src目录下创建store/ 3）在根目录的里面引入 import store from ./store 4) 在里加入store的配置 6、配置axios 1) 安装vuex cnpm i axios@next -D 2) 在src目录建立api/,并在其中引入axios import axios from axios 在中创建axios实例添加请求拦截器和响应拦截器 再将实例导出export 3)在src目录建立api/,引用axios实例，并统一定义请求函数 7、在src下建立views目录和路由子目录home/ 8、在assets目录增加css 、iconfont、images、js目录，存放资源 9、根目录下建立static\ 定义常量 const API_ROOT=127.0.0.1:8081 建立对象={ url:{ apiUrl:} }