vue.js相关安装

Ginger cat~

已于 2023-12-25 19:03:41 修改

阅读量981

点赞数 27

分类专栏： vue.js 前端文章标签： vue.js 前端 javascript

于 2023-12-18 13:26:06 首次发布

本文链接：https://blog.csdn.net/glowing_cat/article/details/135059952

版权

vue.js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

前言

Vue.js是一种流行的JavaScript框架，用于构建用户界面和单页应用程序，采用了MVVM（Model-View-ViewModel）架构模式，将应用程序分为视图层（View）、数据模型层（Model）和视图模型层（ViewModel）。通过双向数据绑定和组件化的方式，使开发者能够更加高效地构建交互式的用户界面。使开发者能够快速构建出优雅、可维护的用户界面。

通过视频快速了解vue.js

Vue.js 是什么样的框架？解决了哪些问题？_哔哩哔哩_bilibiliVue.js 是什么样的框架？解决了哪些问题？《 Vue 3.x 全家桶完全指南与实战》课程：https://study.163.com/course/courseMain.htm?courseId=1212778803&share=2&shareId=480000002172128《React 即时通信 UI 实战》课程：https://study.163.com/course/, 视频播放量 14135、弹幕量 6、点赞数 318、投硬币枚数 64、收藏人数 200、转发人数 28, 视频作者峰华前端工程师, 作者简介《JavaScript基础语法详解》作者。可视化、易懂的编程知识教学！商务合作：zxuqian更多资料：https://zxuqian.cn，相关视频：给我30分钟！带你体验前端Vue框架的魅力，第一次用vue编写APP，01-如何把html页面改写到vue项目中，100秒认识Vue，编程为什么要学框架？框架的作用和意义是什么？，vue概述，MVVM理解，渐进式框架是什么，Vue的优点，spring boot是什么？基本了解，Vue是什么，前端究竟要学哪些,html、css、js和vue就够了?完整版学习路线,每天一遍,大厂相见https://www.bilibili.com/video/BV1ZS4y1J7Mq?t=2.3

- - - - - - 视频来自于哔哩哔哩博主峰华前端工程师

一、vue脚手架

1.脚手架安装

1.1 VSCodeUserSetup安装

1.1.1插件安装

更改语言为中文（chinese）

vue.js所需插件下载

        Path Intellisense

        Vue.js Extension Pack

        Vetur

        Vue Peek

1.2 node安装

1.3 浏览器插件添加

以谷歌浏览器为例

在扩展程序中打开开发者模式，刷新，将vue.js_devtools拖入扩展程序中，添加扩展

1.4 脚手架版本安装

windows+r打开运行框，输入cmd进入命令提示符

查询npm和node版本，验证安装是否成功，出现版本号安装成功

查看node版本：node -v
查看npm版本：npm -v

配置淘宝镜像，提高下载速度

淘宝镜像1： npm install -g cnpm --registry=https://registry.npm.taobao.org
淘宝镜像2：npm config set registry https://registry.npmmirror.com/

脚手架版本安装

npm install -g @vue/cli@版本号(如果不写默认装最新版本)
有淘宝镜像用这个：cnpm install -g @vue/cli@版本号(如果不写默认装最新版本)

查看脚手架版本号，验证安装结果，出现版本号安装成功

2.vue项目创建

vue create 项目名

注：Check the features needed for your project中是使用空格选择

创建项目安装所需功能建议不要选择Linter/Formatter，因为太严格，一个空格都报错

二、路由

1.路由安装

1.1 在创建好的项目中安装

进入项目根文件夹，在路径上输入cmd，回车

在打开的命令提示符窗口输入命令：npm add router

npm add router

1.2 在创建项目时安装

在项目选择所需功能时空格选择Router

三、Axios

1.Axios安装

进入项目根文件夹，在路径上输入cmd，回车进入命令提示符输入命令：npm install axios

npm install axios

或：npm i axios

四、element-ui

1.插件安装

进入项目根文件夹，在路径上输入cmd，回车进入命令提示符输入命令：vue add element

五、命令大全

1.淘宝镜像安装

官方默认镜像不在国内，切换回国内使用淘宝镜像能够加快下载速度

淘宝镜像1： npm install -g cnpm --registry=https://registry.npm.taobao.org
淘宝镜像2：npm config set registry https://registry.npmmirror.com/

2.脚手架安装/卸载

2.1安装

npm install -g @vue/cli@版本号(如果不写默认装最新版本)
有淘宝镜像用这个：cnpm install -g @vue/cli@版本号(如果不写默认装最新版本)

2.2卸载

npm uninstall -g @vue/cli

3.路由安装

npm add router

4.Axios安装

npm install axios

5.Element UI安装

vue add element

6.查看相关版本

查看node版本：node -v
查看npm版本：npm -v
查看vue版本：vue -V

7.项目相关命令

        项目创建：vue create 项目名
        安装项目依赖包：npm install
        卸载包：npm uninstall
        安装包：npm install 包名
        更新包：npm update
        项目启动：npm run serve
        项目构建：npm run build