Vue入门（Vscode）

「爱情、让人受尽委屈。」 2023-10-02 14:08 41阅读 0赞

Vue是一套构建用户界面的渐进式框架。只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件【解决前端开发痛点“复杂的dom操作”】

## 1.Vue特点 ##

渐进式

组件化

响应式【数据响应式，数据变化页面重新渲染】

![db6eba882bd2414cd832983f073f45a2.png][]

## 2.安装node.js ##

### 2.1傻瓜安装 ###

资源路径 [Download | Node.js][Download _ Node.js]

查看node.js安装情况【node -v】node.js安装后默认安装npm

查看npm安装情况【npm -v】升级npm版本（npm install npm -g）

### 2.2安装vue脚手架 ###

npm install -g @vue/cli 【卸载老版本 npm install -g @vue/cli】

查看vud脚手架安装情况【vue -V】

安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 非必要

### 2.3构建vue项目 ###

vue create demo 一路y

### 2.4启动项目 ###

进入demo文件夹目录下 npm run serve

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQOS4iua6kOeggQ_size_19_color_FFFFFF_t_70_g_se_x_16][]

### 2.5访问项目 ###

[http://localhost:8080/][http_localhost_8080]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQOS4iua6kOeggQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 3.安装Vscode ##

### 3.1资源路径 ###

[Download Visual Studio Code - Mac, Linux, Windows][Download Visual Studio Code - Mac_ Linux_ Windows] 傻瓜安装

### 3.2插件安装 ###

Code Runner 运行js等代码

Auto Rename Tag 自动化更改结束标签

Liver Server 自动搭建本地服务器

Prettier-Code Formatter 美化代码

Vetur vue组件格式支持

vscode-icons 美化文件图标

[VUE入门（HelloWord）][VUE_HelloWord]

初学小白，如描述有误望大家见谅 帮忙指正 3Q 一起学习 一起进步

[db6eba882bd2414cd832983f073f45a2.png]: https://img-blog.csdnimg.cn/img_convert/db6eba882bd2414cd832983f073f45a2.png
[Download _ Node.js]: https://nodejs.org/en/download/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQOS4iua6kOeggQ_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d7574b8d7ffe41ecaabc1bbe2e18fd70.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQOS4iua6kOeggQ==,size_19,color_FFFFFF,t_70,g_se,x_16
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQOS4iua6kOeggQ_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5143d282457644d8b0a5a5d8fc6651ee.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQOS4iua6kOeggQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[Download Visual Studio Code - Mac_ Linux_ Windows]: https://code.visualstudio.com/Download
[VUE_HelloWord]: https://blog.csdn.net/qq_34253002/article/details/121315091