Vue

Vue是前端优秀框架，是一套用于构建用户界面的渐进式框架

Vue是目前前端最火的框架之一
Vue是目前企业技术栈中要求的知识点
Vue可以提升开发体验
Vue学习难度较低

Vue开发前的准备

NodeJs

详情参考【nodejs相关文档】

Vue CLI

Vue CLI Vue.js 开发的标准工具，Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

npm install -g @vue/cli

安装之后，在命令行中访问 vue 命令。可以通过简单运行 vue ，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

vue --version

版本要求

文档更新时间: 2024年3月13日09:50:55

Node版本: 大于16.20.0

Npm版本: 大于10.5.0

版本问题报错如下:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'create-vue@3.10.1',
npm WARN EBADENGINE   required: { node: '>=v16.20.0' },
npm WARN EBADENGINE   current: { node: 'v16.15.0', npm: '8.5.5' }
npm WARN EBADENGINE }

Vue.js - The Progressive JavaScript Framework

TypeError: (0 , import_node_util.parseArgs) is not a function
    at init (D:\NVM\nvm\v16.15.0\node_cache_npx\2f7e7bff16d1c534\node_modules\create-vue\outfile.cjs:4478:72)
    at Object.<anonymous> (D:\NVM\nvm\v16.15.0\node_cache_npx\2f7e7bff16d1c534\node_modules\create-vue\outfile.cjs:4858:1)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47
npm notice
npm notice New major version of npm available! 8.5.5 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g npm@10.5.0 to update!
npm notice

创建项目

npm install vue@latest

在控制台中，可以用上下按键调整选择项

在控制台中，可以用空格(spacebar)选择是否选中和取消选中

可以选择默认项目模板，或者选“手动选择特性”来选取需要的特性。

效果如下:

create-vue@3.10.1
√ 请输入项目名称： ... about-vue
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ Add Vue DevTools extension for debugging? (experimental) ... 否 / 是

正在初始化项目 G:\projects\avue\about-vue...

项目初始化完成，可执行以下命令：

  cd about-vue
  npm install
  npm run dev

VSCode中安装vetur 或者volar 都可，前者针对Vue2版本，后者针对Vue3版本

初始化已有项目

拉取项目代码

选择一个项目的目录（任意位置，path最好不要有中文，以免出现意外的Error）
```
git clone https://gitee.com/konglm/project-info-analysis.git
```
进入项目目录（package.json所在的目录），下载相关依赖
```
npm i 
# 或
npm install
```
- npm ERR！ code ERESOLVE
  
  可能因本地依赖与项目中的依赖存在冲突
```
在指令后面加上 "--force"
npm install --force
```
- npm Err! path git
  
  git环境变量设置错误或者没有设置
```
设置git环境变量，将git安装目录下的cmd目录放到系统变量中的path中
```
- npm ERR! code CERT_HAS_EXPIRED
  
  CERT_HAS_EXPIRED是一个由Node.js和npm抛出的错误，表示你正在尝试访问的服务器的SSL证书已经过期。
```
清除npm缓存
npm cache clean --force
取消ssl验证：
npm config set strict-ssl false
再执行npm install
```
运行项目
番外:

npm install问题解决思路
1. 确认网络状态
2. 清除npm缓存,重新npm install
3. 其他特殊问题特殊处理(一般情况下都是GitHub国内访问限制的问题)

关于环境

WebStrom

插件: vue.js \ Element

插件集市地址: plugins.jetbrains.com/

将下载好的Jar放到安装目录下的plugins中重启WebStrom即可

目录结构

node_modules ----Vue项目运行的依赖文件
public ----资源文件夹
src ----源码文件夹
.gitignore ----git忽略文件
index.html ----入口文件
package.json ----信息描述文件
README.md ----注释文件
vite.config.js ----Vite配置文件

初识Vue（一）

Vue

Vue开发前的准备

NodeJs

Vue CLI

版本要求

创建项目

初始化已有项目

关于环境

目录结构