Vue3创建项目(一)新手教程

整理一下Vue3创建项目,新手教程,看完需要预计花费10分钟。

🍓使用命令创建项目

1.环境准备

Vue依赖NodeJs的环境,需要先安装Nodejs。

2.NodeJs安装

  1. 打开NodeJs下载页
  2. 选择自己系统对应的版本下载。

3. 验证安装

1 在cmd命令行中输入 node -v,如果输出版本号则代表安装成功

图片[1]-Vue3创建项目(一)新手教程-智码星河

🍉🍉🍉4.安装@vue/cli工具

 在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。 打开cmd使用命令全局安装@vue/cli

npm install -g @vue/cli
图片[2]-Vue3创建项目(一)新手教程-智码星河

🍉🍉​​​​​​​🍉安装完成之后在cmd中输入命令验证安装 注意是大写

VUE -V
图片[3]-Vue3创建项目(一)新手教程-智码星河

🍉​​​​​​​🍉​​​​​​​🍉5.创建项目

🍓使用命令创建项目

vue create project-name

选择镜像源(可能在选择后不会再出现) 命令中的project-name是项目名字,可以自定义,其它的就是固定写法 回车后新版的会提示默认源网速较慢,是否使用淘宝镜像(够人性化)

图片[4]-Vue3创建项目(一)新手教程-智码星河

🍓键盘Y之后回车

选择preset

图片[5]-Vue3创建项目(一)新手教程-智码星河

你会被提示选取一个 preset(如上图)。

包含babel+eslint的vue2版本;

包含babel+eslint的vue3版本;

自己手动选择。 既然本文是vue3,那就可以选择vue3

上下键选择,回车是确认

图片[6]-Vue3创建项目(一)新手教程-智码星河

🍓 等待项目初始化完成..............

图片[7]-Vue3创建项目(一)新手教程-智码星河

🍓根据命令提示依次进入项目文件夹、启动项目

 # 进入目录
$ cd myproject
# 启动项目
 $ npm run serve

🍓完成 

图片[8]-Vue3创建项目(一)新手教程-智码星河
图片[9]-Vue3创建项目(一)新手教程-智码星河

 成功后的截图

下面再看下项目结构

项目结构

图片[10]-Vue3创建项目(一)新手教程-智码星河

后面就是写页面写功能了。

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
文章版权声明 1 本网站名称: 智码星河
2 本站永久网址:https://wx234.cn
© 版权声明 文章版权归作者所有,未经允许请勿转载。

WX234.CN
喜欢就支持一下吧
点赞12 分享打赏
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容