# vue3学习

**Repository Path**: vegee/vue3_learning

## Basic Information

- **Project Name**: vue3学习
- **Description**: 分享vue3项目及学习资料
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-28
- **Last Updated**: 2023-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3学习

#### 1、介绍
分享vue3项目及学习资料

#### 2、架构
- vue3
- TypeScript
- Element Plus
- vite
- vuex
- router

#### 3、安装教程

##### 3.1 安装node.js

##### 3.2 安装cnpm

鉴于国内使用npm的源太拉，经常下载不动，使用淘宝 NPM 镜像

```bash
npm install cnpm -g
```

- tip: -g 表示npm全局安装cnpm

##### 3.3 在cnpm下安装vue3

```bash
# 这里的vue@next就是vue3
cnpm install vue@next
# 安装vue的脚手架
cnpm install -g @vue/cli
```

在安装结束后，对vue3版本进行更新

```bash
vue upgrade --next
```

通过以下命令查看当前vue版本

```bash
vue --version
```

#### 4、创建工程

##### 4.1  使用npm创建工程

依然可以用cnpm创建项目，而且这里与vue2的创建工程方式不一样：

```bash
cnpm init vue@latest
```

此时命令行提示如下图，然后全选No，创建一个纯净的vue3项目：

![创建vue3项目](sampleImage/image-20230106152932348.png)

根据提示依次运行：

- **cd first-vue**----------进入项目；
- **cnpm install**----------部署项目至node.js;
- **cnpm run dev**---------启动项目；

得到结果：

![执行命令](sampleImage/image-20230106153547848.png)

此时打开地址：***http://localhost:5173/***

![执行结果](sampleImage/image-20230106153806806.png)

##### 4.2  vue3目录结构分析
文件夹3个：

- node_modules ----------------类似于jar包和python模块仓库
- public------------------------------存放静态文件
- src-----------------------------------存放vue源代码

属于的工程文件3个：

- index.html------------------------主页模板
- package.json---------------------vite打包文件，类似于maven的pom.xml
- vite.config.js----------------------vite打包的配置文件，配置端口，初始页服务器网址

#### 5、参考资料

- vue官网：**[Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)](https://cn.vuejs.org/)**

- TypeScript: [TypeScript 入门教程 (xcatliu.com)](http://ts.xcatliu.com/)

- Element Plus: [一个 Vue 3 UI 框架 | Element Plus (gitee.io)](https://element-plus.gitee.io/zh-CN/)

- vite: [开发服务器选项 | Vite 官方中文文档 (vitejs.dev)](https://cn.vitejs.dev/config/server-options.html#server-https)

- vue的辅助模块：
  - vue router: [Vue Router | Vue.js 的官方路由 (vuejs.org)](https://router.vuejs.org/zh/)
  - vuex: [开始 | Vuex (vuejs.org)](https://vuex.vuejs.org/zh/guide/#最简单的-store)

- JavaScript教程：[JavaScript 教程 (w3school.com.cn)](https://www.w3school.com.cn/js/index.asp)

- vue3辅助教程：[Vue3 教程 | 菜鸟教程 (runoob.com)](https://www.runoob.com/vue3/vue3-tutorial.html)

- Echarts官网：[Apache ECharts](https://echarts.apache.org/zh/index.html)