Vue3-01-创建项目

环境准备

复制代码
1.需要用到 16.0 以及更高版本的 node.js
2.使用vscode编辑器进行项目开发


可以在命令行中查看node的版本号:
node -v

创建项目

1.准备一个目录

复制代码
例如,我创建项目的时候是在该目录下进行的;

D:\projectsTest\vue3project

2.执行创建命令(*)

shell 复制代码
npm create vue@latest

3.使用vscode打开创建的项目

复制代码
项目刚创建完成后的目录结构如下:
此时只有基本的文件,并没有node_modules 目录,因此,文件中导入依赖会提示错误!


4.安装依赖

shell 复制代码
# 进入到项目目录下,执行安装命令
npm install

5.安装完成之后的目录

复制代码
新安装的依赖会存放到 node_modules 目录下,
并且文件中导入的依赖也不会提示报错了


6.一个奇怪的问题

复制代码
如果 创建完成之后,tsconfig.node.json 文件中提示下面的异常:

Cannot find type definition file for 'node'.
The file is in the program because:
Entry point for implicit type library 'node'

我感觉这是vscode 的一个bug,重新打开一下项目就会好了,或者随便编辑一下,然后保存保存,
错误提示就会消失。

启动项目

1.启动项目并访问一下试试

复制代码
在项目目录下执行命令:
npm run dev

在浏览器中访问即可查看到访问的页面。


2.启动命令为什么是 npm run dev

复制代码
这个问题很简单,这个启动命令,是在项目的 package.json 文件中配置的。
配置内容如下:

至此,vue3 创建最基本的项目就完成了

相关推荐
哆啦A梦15881 天前
java项目在后端做跨域配置
java·vue3
路光.3 天前
uniappVue2升级Vue3内存溢出解决方式
vue·vue3·uniapp
沙振宇3 天前
【Web】使用 Vue3+PlayCanvas 开发 3D 游戏(五)3D 模型鼠标交互控制
3d·vue3·鼠标·playcanvas
nibabaoo6 天前
前端开发攻略---Vue3项目中实现指定区域的打印预览与 PDF 导出功能
vue3·js·打印预览pdf
nibabaoo6 天前
前端开发攻略---在 Vue 3 项目中使用 vue-i18n 实现国际化多语言
前端·javascript·国际化·i18n·vue3
沙振宇7 天前
【Web】使用Vue3+PlayCanvas开发3D游戏(四)3D障碍物躲避游戏2-模型加载
游戏·3d·vue3·vite·playcanvas
SuperEugene8 天前
Vue3 中后台实战:VXE Table 从基础表格到复杂业务表格全攻略 | Vue生态精选篇
前端·vue.js·状态模式·vue3·vxetable
p5l2m9n4o6q8 天前
Vue3后台管理系统布局实战:从零搭建Element Plus左右布局(含Pinia状态管理)
vue3·pinia·element plus·viewui·后台管理系统
梵得儿SHI8 天前
Vue3 生态工具实战进阶:API 请求封装 + 样式解决方案全攻略(Axios/Sass/CSS Modules)
前端·css·vue3·sass·api请求·样式解决方案·组合式api管理
行者-全栈开发9 天前
43 篇系统实战:uni-app 从入门到架构师成长之路
前端·typescript·uni-app·vue3·最佳实践·企业级架构