【Vue】Vue开发环境

Digital_Spring
594 阅读6分钟

作者：Adlerian

1. Visual Studio Code

Visual Studio Code（简称VS Code）是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于前端开发人员来说，一个强大的编辑器可以使开发变得简单、便捷、高效。

1.1 VS Code特点

  1. 轻巧、极速，占用系统资源较少。
  2. 具备代码智能补全、语法高亮显示、自定义快捷键和代码匹配等功能。
  3. 跨平台，可用于macOS、Windows和Linux操作系统。
  4. 主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色，以及可以快速查看已打开的项目文件和项目文件结构。
  5. 提供丰富的扩展，用户可根据需要自行下载和安装扩展。

1.2 下载和安装VS Code编辑器

1.2.1 下载

打开浏览器，登录VS Code编辑器的官方网站 ->Visual Studio Code - Code Editing. Redefined

image-20240425005619241.png

> 在VS Code编辑器的官方网站中，单击“Download for Windows”按钮，该页面会自动识别当前的操作系统并下载相应的安装包。如果需要下载其他系统的安装包，可以单击按钮右侧的小箭头↓打开下拉菜单，就会看到其他系统的安装包对应的下载图标。如上图红色方框。

1.2.2 安装

下载VS Code编辑器的安装包后，在下载目录中找到该安装包，如下图所示

image-20240425010021802.png

双击上图所示的图标，启动安装程序，然后按照程序的提示一步一步进行操作，直到安装完成。

1.2.3 启动

将VS Code编辑器安装成功后，启动该编辑器，即可进入VS Code编辑器的初始界面

image-20240425010138479.png

1.3安装扩展插件

单击VS Code编辑器的初始界面左侧边栏中的“ image-20240425010551679.png ”图标按钮进入扩展界面

1.3.1 下载中文插件

image-20240425010459543.png

重新启动

image-20240425010725680.png

1.3.2Vue VSCode Snippets

快速输出vue模板 vbase

image.png

Vue VSCode Snippets

github.com/sdras/vue-v…

1.3.3 Vue - Official

语法官方验证

image-20240428022324721.png

2. Node.js环境

2.1 下载

打开node官网:card_index:：Node.js — Run JavaScript Everywhere (nodejs.org)

直接下载node.js(LTS)

node两个版本

LTS(long term support)长期支持版

Current最新发布版

image-20240430103000350.png

2.2 安装

  1. 运行下载后的文件（例如：node-v20.0.0-x64.msi）

此功能不能选

image-20240430103434297.png

  1. 全部采用默认值安装，或者去改变路径（可能需要一定的手动操作）

image-20240430103442382.png

  1. 安装完成

image-20240430103504883.png

  1. 验证是否安装完成
  • 按windows+R组合键，打开“运行”对话框，输入cmd,点击“确定”按钮或者直接按“Enter”键，会打开命令提示符。

image-20240430103556970.png

  • 在命令提示符中，输入命令node -v（v代表version的简写）,查看当前安装的Node.js版本。如图

image-20240430103624785.png

2.2 常见的包管理工具

在vue项目开发中,经常需要通过各种第三方发包（package）来扩展项目的功能。<包，就是一系列模块化代码打包形成的包，统称为依赖包>。为了方便管理第三方包，就需要用到包管理工具。包管理工具可以让我们更好的下载、升级、卸载包。

常见的包概念了工具有npm、pnpm和yarn。

下载包工具

npm install  yarn/npm/pnpm  -g

更换国内源镜像

npm config set registry https://registry.npmmirror.com

查看当前镜像

npm config get registry

查看是否安装镜像

image-20240430103737560.png

# 卸载包
npm uninstall 包名
# 更新包
npm update 包名
# 安装包
yarn install 包名
# 卸载包
yarn remove 包名
# 更新包
yarn up 包名
# 添加指定名称的包
yarn add 包名

3. 使用vite创建Vue3项目

在使用Vue3开发大项目的时候，需要考虑目录的结构、热加载、部署、代码单元测试等环节。使用手动实现效率比较低，因此需要借助Vite快速创建一个项目。

3.1 创建Vue3项目

使用npm 和yarn包管理工具可以搭建vite手动创建项目。

# npm创建
npm creat vite@latest
# yarn 创建
yarn creat vite

打开命令提示符，切换到自己准备的路径执行命令

image-20240430104004455.png

选择相关的项目名称，然后选择创建项目时使用的框架Vue

image-20240430104019405.png

选择变体

image-20240430104038846.png

项目创建完成

image-20240430104112570.png

执行相关命令完成项目启动

cd vite_demo # 进入项目文件夹
yarn         #下载项目依赖包
yarn dev     #启动项目

项目启动后会默认开启本地访问

在浏览器能访问http://localhost:5173/

image-20240430104200988.png

页面效果如下

image-20240430104226336.png

也可以使用模板创建项目

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

支持的模板预设包括：

  • vanilla
  • vanilla-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts

3.2Vue3项目的目录结构

vue项目创建完成后会有一个默认生成的目录结构

image-20240430104429580.png

  • .vscode：存放VS Code编辑器的相关配置。

  • node_modules：存放项目的各种依赖和安装的插件。

  • public：存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。

  • src：源代码目录，保存开发人员编写的项目源代码。

  • src\assets：存放可编译的静态资源文件，例如图片、样式文件等。该目录下的文件需要使用相对路径访问。

  • src\components：存放单文件组件，即.vue文件。

  • src\components\HelloWorld.vue：一个名为HelloWorld的组件。

  • src\App.vue：项目的根组件。

  • src\main.js：项目的入口文件，用于创建Vue应用实例。

  • src\style.css：项目的全局样式表文件。

  • .gitignore：向Git仓库上传代码时需要忽略的文件列表。

  • index.html：默认的主渲染页面文件，同时也是页面的入口文件。

  • package.json：包配置文件。

  • README.md：项目使用说明文件。

  • vite.config.js：存放Vite的相关配置。

  • yarn.lock：存储每一个依赖项的安装版本，在使用yarn安装、升级、卸载依赖时，会自动更新yarn.lock文件。

此外，当执行了yarn build命令后，在项目目录中会出现dist目录，该目录中保存的是项目构建后的文件。

3.2 Vue3项目的运行过程

使用Vite构建Vue 3项目后，当执行yarn dev命令启动服务时，项目就会运行起来，该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。

  1. src\App.vue Vue 3项目是由各种组件组成的，src\App.vue文件是项目的根组件。在根组件中可以引用其他组件，从而显示其他组件的内容。

  2. index.html

    index.html文件是页面的入口文件，该文件中预留了用于被src\main.js文件中的Vue应用实例所控制的区域。

  3. src\main.js

    src\main.js文件是项目的入口文件，该文件创建了Vue应用实例。Vue应用实例是Vue项目工作的基础，每个Vue项目都是从创建Vue应用实例开始的。

avatar
文章
阅读
粉丝