Vue宏观理解

文章目录

  • [1 Vue是什么](#1 Vue是什么)
  • [2 前端运行环境和工具](#2 前端运行环境和工具)
  • [3 环境搭建](#3 环境搭建)
    • [3.1 node.js安装](#3.1 node.js安装)
    • [3.2 Vite环境安装](#3.2 Vite环境安装)
  • [4 Vue项目开发](#4 Vue项目开发)
    • [4.1 Vue项目开发开发方式](#4.1 Vue项目开发开发方式)
    • [4.2 Vue项目结构](#4.2 Vue项目结构)
    • [4.3 启动Vue项目](#4.3 启动Vue项目)
    • [4.4 Vue开发](#4.4 Vue开发)
    • [4.4 Vue工程运行流程](#4.4 Vue工程运行流程)

1 Vue是什么

Vue是一款Web前端JavaScript 框架;

官网:https://vuejs.org/

2 前端运行环境和工具

1、node.js 是一个开源跨平台的 JavaScript 运行时环境,可以理解成java中的jdk;

官网:https://nodejs.org/

2、npm是JavaScript依赖包管理工具,可以进行前端项目的打包、依赖下载等,可以理解成java中的maven;

官网:https://www.npmjs.com/

3、Vite是快速构建前端Vue项目的脚手架,可以理解为开发Spring Boot的Spring Initializr快速构建工具;

官网:https://cn.vitejs.dev/

3 环境搭建

3.1 node.js安装

【解压即可用】

下载:https://nodejs.org

安装:解压即完成安装;(使用的是zip压缩包)

【配置环境变量】

1、在 D:\dev\node-v20.12.0-win-x64 下创建2个文件夹:

node_global (依赖库)

node_cache (缓存)

2、在D:\dev\node-v20.12.0-win-x64目录下cmd进入dos窗口,执行:

npm config set prefix "D:\dev\node-v20.12.0-win-x64\node_global"

npm config set cache "D:\dev\node-v20.12.0-win-x64\node_cache"

3、查看有没有设置成功:

npm config get prefix

npm config get cache

配置环境变量Path,在Path变量中添加如下路径:

D:\dev\node-v20.12.0-win-x64

D:\dev\node-v20.12.0-win-x64\node_global

在任意目录打开dos窗口查看是否配置成功:

node -v

npm -v

注:Node.js已经自带npm,安装Node.js时即已安装了npm,故不需要再安装npm;

【配置npm仓库】

  • 在使用npm命令时,默认是从国外的官方仓库下载依赖,下载速度可能会比较慢,甚至下载失败,我们通常更换为国内淘宝的npm仓库源,提高下载速度;
  • 查看目前的npm仓库源(位置):
    npm config get registry
    设置淘宝源:npm config set registry https://registry.npmmirror.com/
    原来老的淘宝npm地址(http://registry.npm.taobao.org/)即将停止解析,所以建议使用新地址;
    【测试环境】
    安装一个js依赖包测试一下看看:
    npm install axios -g #其中-g是全局安装的意思;
    全局安装就会把axios模块安装到:
    D:\dev\node-v20.12.0-win-x64\node_global 目录下;
    如果不加-g就会安装到了当前执行命令所在的目录下:C:\Users\Administrator

3.2 Vite环境安装

  • npm create vite@latest
    npm是Node Package Manager的缩写,是Node.js的一个包管理工具;
    create是一个npm的命令,用于创建新的npm包;
    vite@latest表示使用最新版本的vite;
    npm create vite@latest命令用于使用npm包管理器创建一个新的Vite项目;

执行该命令最终的效果就是会初始化一个新的项目,配置好必要的文件,并安装所有必要的依赖,包括安装好Vite本身(执行这个命令会自动安装vite,不需要手动安装vite);

4 Vue项目开发

4.1 Vue项目开发开发方式

4.2 Vue项目结构

4.3 启动Vue项目

4.4 Vue开发

4.4 Vue工程运行流程

相关推荐
是罐装可乐11 小时前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞14 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52141 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦2 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君2 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手2 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO3 天前
分类别柱状图(Vue3)
typescript·vue·echarts
大虾写代码3 天前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
机构师3 天前
<uniapp><指针组件>基于uniapp,编写一个自定义箭头指针组件
javascript·uni-app·vue·html
@AfeiyuO3 天前
vue3 实现将页面生成 pdf 导出(html2Canvas + jspdf)
前端·pdf·vue