# Vue学习
**Repository Path**: ran_yong/vue
## Basic Information
- **Project Name**: Vue学习
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-20
- **Last Updated**: 2021-04-12
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Vue深度学习
## 什么是Vue.js
- Vue.js是目前最火的一个框架，React是最流行的一个框架（可开发网站，还可开发手机app）
- Vue.js是前端最主流框架之一，和Angular.js、React.js 一起，并为前端三大主流框架！
- Vue.js是一套构建用户界面的框架，只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。
## 安装Vue.js
```官方网站：```https://v3.cn.vuejs.org/
```安装教程：```https://www.jianshu.com/p/13f45e24b1de
```安装Node.js：```https://nodejs.org/en/
```更换npm镜像地址:npm config set registry https://registry.npm.taobao.org```
```检测是否更换成功:npm config get registry```
修改全局依赖包下载路径
```
首先在node根目录创建两个文件
node_global和node_cache
npm config set prefix "C:\node\node_global"
npm config set cache "C:\node\node_cache"
添加环境变量path中：
C:\node\node_global
检测是否修改成功：
npm root -g
```
检测是否安装成功：
```
输入：node -v 有输出结果即成功
输入：npm -v 有输出结果即成功
```
通过npm安装:
```
# 最新稳定版
npm install vue@next
```
安装Vue-cli脚手架：
```
npm install -g @vue/cli
```
检测是否安装成功：
```
输入：vue -v 有输出结果即成功
```
搭建第一个程序：
```
vue create vue3-app //vue3-app 项目名称
选择 Manually select features // 选择为回车
勾选 Router Vuex Css Pre-processors // 空格为勾选
选择 3.x(Preview)
输入 N
输入 N
cd vue3-app
npm run serve
```
目录介绍：
```
node_modules // vue所有的依赖
public // 项目的静态资源 不会被vue编译
src // 会被编译的静态文件夹
assets // 素材 用于存放静态资源
components // 组件
components //所有项目依赖的组件
router // 路由
store // 全局状态管理
views // 存放所有的页面
App.vue // 模块化的根模块
main.js // 所有项目初始化的入口
```
## Vue基础语法
### 创建第一个helloword代码
```html
创建一个Hello World
// 引用Vue3源码
div
```