侧边栏壁纸
博主头像
一朵云的博客博主等级

拥抱生活,向阳而生。

  • 累计撰写 67 篇文章
  • 累计创建 25 个标签
  • 累计收到 7 条评论

目 录CONTENT

文章目录

Vue 笔记(1) -- 新建一个vue项目

一朵云
2022-08-06 / 0 评论 / 2 点赞 / 7703 阅读 / 4054 字

一、什么是Vue,及它有什么优势

  Vue是前端优秀框架,是一套用于构建用户界面的渐进式框架。
  中文官网地址:https://cn.vuejs.org/

  优势:

  • Vue是目前前端中最热门的框架之一;
  • Vue是目前前端工程师招聘必备知识技能;
  • Vue可以提高开发体验和效率;
  • Vue学习成本低,入门快
  • 等等

二、创建并启动项目

1、为电脑安装node.js

自行安装 16.0 或更高版本的 Node.js

2、下载安装vue-CLI

Vue-CLI 是Vue.js开发的标准工具,Vue-CLI是一个基于Vue.js进行快速开发的完整系统。
中文官网地址:https://cli.vuejs.org/zh/

# 安装指令,觉得太慢也可以用cnpm
npm install -g @vue/cli

#查看是否安装成功,看版本号
vue --version

3、创建项目

在 VS Code 工具的终端中输入(项目名称建议保持小写,分隔可用“-”连接。):

#常用这个
vue create my-project
# 或者
vue ui

image-1675680070515

Y,表示使用更快的中国镜像。

image-1675680093648

键盘上下键选择最后一个,表示手动创建脚手架。

image-1675680116756

只选择箭头所指的两个,用键盘的空格键来选中。

image-1675680137007

选择vue3即可,vue3包含vue2。

image-1675680156566

暂时默认即可

image-1675680176424

是否保存刚才咱们的选择,方便后续使用,暂时也不需要,选择N即可。

最终效果展示:

image-1675680198080

image-1675680217912

4、启动项目

# 进入项目根目录
cd my-first-vue-project
# 运行项目
npm run serve

image-1675680351023

按cmd提示使用浏览器访问“localhost:8080”

image-1675680395625

看到该网页表示vue项目部署成功了。

5、安装代码高亮插件

为VS Code工具添加代码高亮插件,vue2 版本可使用vetur;vue3 版本可使用volar。

image-1675680522183

2

评论区