45 lines
1.5 KiB
Markdown
45 lines
1.5 KiB
Markdown
|
|
|||
|
|
|
|||
|
|
# `Vue`开发说明
|
|||
|
|
|
|||
|
|
> 更新:`zhanli@2023-12-16`
|
|||
|
|
|
|||
|
|
### 一、`vue`开发环境的安装
|
|||
|
|
|
|||
|
|
##### 1.1 `vue`安装
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
# 全局安装vue-cli : 打开windows命令提示符或者终端
|
|||
|
|
npm install --global vue-cli
|
|||
|
|
# 安装完毕后，运行命令验证安装情况，如果输出版本号，则说明安装成功
|
|||
|
|
vue -V
|
|||
|
|
# 出现版本信息即为正确
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
在`windows`的`powershell`中运行安装命令图如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
##### 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
|
|||
|
|
```
|
|||
|
|
|