# vue-base

**Repository Path**: wayfreem/vue-base

## Basic Information

- **Project Name**: vue-base
- **Description**: vue基础学习
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-29
- **Last Updated**: 2024-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 说明

Vue 基础学习相关整理

视频链接：[B站视频](https://www.bilibili.com/video/BV1vq4y1L7Wg/?p=17&spm_id_from=333.880.my_history.page.click&vd_source=49631ab81d26f08d7c1bab744b75c7e8)

## 源码说明

```
以下源码采用引入 vue.js 的方式
    01-quick-start
    02-Vue的基础语法
    03-Vue的组件化
    04-Vue的动画
    05-Vue的高阶特性

以下源码采用工程化方式构建
    06-Vue工程化
    07-Vue实战
```

## 全局安装 vue-cli
```shell
yarn global add @vue/cli

npm install -g @vue/cli
```

### 升级到最新版本

```shell
## 升级
npm update -g @vue/cli

## 查看版本
vue -V
```

### 关于 [Vite](https://cn.vitejs.dev/)

在 [vue cli的官网](https://cli.vuejs.org/zh/) 上面，就有说明，已经不在推荐使用来构建项目了。

> Vue CLI 现已处于维护模式!
> 现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。

**使用 Vite 来构架项目**

可以通过指定模板来创建
```shell
# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

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

# pnpm
pnpm create vite my-vue-app --template vue
```

如果是创建 ts 模板版本的，就使用下面的就好
```shell
// 其实就是后面增加了一个 -ts
npm create vite@latest my-vue-app --template vue-ts
```


## 使用 vue-cli 项目搭建

### **完整的项目流程**

```
## 初始化 package.json
npm init -y

## 安装 vue-cli
npm i -D @vue/cli

## 创建项目
npx vue create project-one
```

### 详细说明

#### 1. 初始化 package.json

```
npm init -y
```

使用执行上面的命令之后，就会出现一个 `package.json` 的文件，内容如下

```
{
  "name": "vue-admin-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

##### 2. 安装 vue-cli

```
npm i -D @vue/cli
```

安装完成之后，可以使用 `npx vue -V` 来查看 `vue/cli` 的版本号


##### 3. 创建 vue 项目

```
npx vue create project-one
```

选择 vue3 以及 yarn，最后输出：

```
Done in 16.99s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project project-one.
👉  Get started with the following commands:

 $ cd project-one
 $ yarn serve

PS E:\VueProjects\vue-cli-admin-demo>
```

到此就搞完了。