# Vue_study

**Repository Path**: ye_wei_rui/vue_study

## Basic Information

- **Project Name**: Vue_study
- **Description**: source vue and vue study
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-03
- **Last Updated**: 2021-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_test

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


# 笔记 脚手架

## 记录 git 命令步骤
git remote add origin https://gitee.com/ye_wei_rui/vue_study.git

git pull origin master

git add .

git commit -m ''

git push origin master 

==以下基本命令==
git branch
git status 
git pull
git add .
git commit -m "show draw"
git status 
git push 
git push -u origin master

首次记得添加 远程地址：git remote add origin git@gitee.com:你的gitee用户名/仓库名.git

git branch
// 删除分支
git branch -d ye(分支名称)
// 转移分支
git checkout dev


## 结构分析

npm run serve 执行后，直接运行 ./src/main.js 命令  

## 分析 main.js 
分析 render 是一个函数 调用了 createElement()函数
render: h => h(App)

## Vue 的组成
vue是由两个组成， 核心 + 模板解析器
如果不分离，vue.js 模板解析器占 1/3 大小，webpack会打包成很大的包，模板解析器不会帮助解析

## 修改默认配置
脚手架的配置文件  Vue脚手架隐藏了所有webpack 相关的配置
执行 vue inspect > output.js 查看具体的webpack配置 在 output.js
只是查看作用的，output 查看 不能修改

约定大于配置
tip: 使用脚手架，哪些文件、文件夹名称不能修改  五处约定的名称不更改
    --public 文件夹不能修改
        -- favicon.ico
        -- index.html
    --src 不修改
        -- main.js 名称不修改

使用vue.config.js 可以对脚手架进行个性化定制，详情查看官网
    

# vue 在VScode 运行报错 解决方法：
（1）以管理员身份运行VSCode

（2）执行命令：get-ExecutionPolicy（取得shell的当前执行策略）

显示Restricted（表示状态是禁止的）

（3）执行命令：set-ExecutionPolicy RemoteSigned

（4）执行命令：get-ExecutionPolicy，显示RemoteSigned

## scoped样式
    作用：让样式在局部生效，防止冲突
    写法： <style scoped>

## TodoList 案例 （待办事项）

### 组件化编码流程（通用）

1. 实现静态组件：抽取组件，使用组件实现静态页面效果

2. 展示动态数据
    2.1 数据的类型、名称是什么？
    2.2 数据保存在哪个组件？
    
3. 交互————从绑定事件监听开始


## Vue router 路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

对于脚手架，项目插件形式添加Vue Router

Vue.js + Vue Router 创建单页应用，通过组件来组成应用程序
组件（components） 映射到路由 (routes) 再告诉 Vue Router 在哪里渲染

路由懒加载：结合Vue的异步组件 和 Webpack的代码分割功能，实现路由组件的懒加载


# 学习Vue项目 
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide
admin 项目学习
|—— build   构建相关
|—— mock    模拟数据
|—— publi   静态资源
|—— src     源代码 @ 路径
|   |—— api 所有请求
|   |—— assets  主题 字体等静态资源


模板同后台通信标准的确定版