安装:
## 第一步
```
npm install -g @vue/cli
```
## 如何查看是否安装成功
```
vue --version
```
![](https://img.kancloud.cn/61/dd/61ddc0871a54f59b9a01048c528f9eb4_967x463.png)
## 我们使用vue create命令创建自己的项目
```
vue create my-project
```
![](https://img.kancloud.cn/76/8a/768a9a3f1e852a60cc10348e994956c0_1150x613.png)
## 安装成功后会有成功的提示语
![](https://img.kancloud.cn/2e/98/2e98bf0b56325d9689dc4d85feb7e179_921x634.png)
## 常用插件
Vue 2 Snippets、Vue Theme、Vue VS Code Extension Pack、Vue VSCode Snippets、Vuter
# 目录结构:
## assets--------
存储静态文件的,和public不同的是assets文件夹会被webpack进行打包,所以要使用相对路径
## public-------- 静态资源文件,和assets不同的是 public不会被webpack进行打包,使用路径的时候要使用绝对路径
## src --------项目核心区域
## compoents--------- Vue功能组件的存放位置,内部存在的是公用的组件
## views-------- 公共文件,主要以各个独立页面为主
## app.vue ----------整个vue的根组件,所有的vue组件都是从这个组件中拓展的,APP根组件最后通过编译后将内容渲染到.html文件中
## main.js ------------vue的入口文件,vue文件初始化位置,内部存放的是公用的组件
## gitignore-------------- GitHub相关配置文件,作用是git再提交代码的时候指定相关忽略格式文件
## babel.config.js-------------- babel的配置文件
## package.json-------------- 配置(记录)项目的相关模块,项目的相关配置信息等等
## package-lock.json--------- 作用的记录的当前项目按照的相关依赖版本,并且记住了当前所有依赖的关联关系,如果下次vue进行编译的时候会安装这个文件进行编译
## README.md--------- 文件的作用是项目相关的使用方法,和使用说明
- vue语法
- vue语法-字符串
- vue事件v-on:
- vue属性绑定v-bind:
- v-if 与v-show使用
- v-for使用
- v-for 遍历json
- v-for 嵌套遍历
- v-html和v-text
- v-cloak
- v-once
- v-pre
- v-on元素添加监听
- v-model
- v-model 数据双向绑定(一般表单用的多)
- v-bind class的应用
- v-bind style使用方法
- 调色板案例 其中用到 v-model和v-bind
- 发布规定限制100字练习
- .stop事件修饰符
- .self事件修饰符
- .prevent事件修饰符
- capture事件修饰符
- once事件修饰符
- 按键修饰符
- 系统修饰符
- 鼠标按键修饰符
- 表单修饰符
- vue-cli脚手架
- cli文件的编译命令与过程
- cli-- mian.js配置文件
- cli-index.html
- cli-app.vue
- cli----组件
- cli----父子传值
- cli--子组件修改父组件值
- 生命周期created
- 计算属性computed
- watch监听
- 计算属性与watch监听实例
- vue组件
- 组件的跟节点注册
- vue全局变量注册方法
- 组件局部注册
- 父子组件通讯
- 组键实战列表
- 动态组件
- keep-alive以及生命周期函数使用
- 单动画过度
- 多元素动画过渡
- 多个组件过渡
- 请求后台api(axios )
- axios请求数据获取json方法
- axios GET请求数据
- axios POST请求数据
- axios GET与POST的另一种写法
- cli 为了防止APP.vue与子组件CSS冲突
- cli静态资源引入(图片等)
- CSS引入
- axios 脚手架里安装以及使用
- vue.config配置跨域问题
- 环境变量
- cli打包上线
- 路由设置router
- router路由跳转方式(编程方式跳转)
- router路由传递参数接受参数
- router嵌套路由
- router动画过渡
- router去掉链接里的#号
- router重定向
- router全局或者局部守卫(登录验证)
- <router-link> 相当于a标签li标签
- <router-view></router-view> 渲染标签
- vuex学习--安装
- vuex-State
- vuex-mutations(函数使用方法)
- 本地存储
- 接口封装
- ES6新语法特性-let const
- ES6-模板字符串 ``反引号
- ES6-对象里函数简化方法
- ES6-箭头函数
- ES6- rest参数
- ES6-Symbol
- ES6-模块化