ELRIWebSystem/Learning/vue/vue-helloworld/README.md

45 lines
1.5 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

# `Vue`开发说明
> 更新:`zhanli@2023-12-16`
### 一、`vue`开发环境的安装
##### 1.1 `vue`安装
```shell
# 全局安装vue-cli : 打开windows命令提示符或者终端
npm install --global vue-cli
# 安装完毕后,运行命令验证安装情况,如果输出版本号,则说明安装成功
vue -V
# 出现版本信息即为正确
```
在`windows`的`powershell`中运行安装命令图如下:
![](http://logzhan.ticp.io:30000/logzhan/PictureHost/raw/branch/main/ELRIWebSystem/Learning/vue/vue-helloworld/install_vue-cli.png)
##### 1.2 初始化项目
`Webpack`是一个模块打包器。 它的主要目标是将 `JavaScript `文件打包在一起,打包后的文件用于在浏览器中使用。`vue-cli`可以使用`webpack`模板对项目进行初始化,即生成`webpack`模板的项目初始代码文件。然后根据提示填写项目基本信息以及相关工具配置
```shell
vue init webpack vue-helloworld
```
上述命令可能出现`vue : 无法加载文件 C:\Users\JYZBYJ\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本`的错误,[解决方案链接](https://blog.csdn.net/m0_62639693/article/details/127314961)。
### 一、Vue项目安装
```shell
cd vue-helloworld
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
# 启动服务
npm run dev
```