Vue总结篇下 （看完你就学会整个Vue）

1.项目系列

1.vue-cli脚手架

vue脚手架，基于webpack构建的，自动创建工程化的vue应用程序开发环境

1.1安装vue-cli

推荐使用cnpm 这是淘宝镜像源
npm install -g cnpm -registry=https://registry.npm.taobao.org 

cnpm i -g @vue/cli


//检查有无安装成功
vue --version //版本出现代表安装成功

1.2 创建项目

找到一个合适的目录(不要以在vue.JS目录中)打开cmd 

vue create 项目名  // 项目名 不能出现大写字母

1.3运行项目

cmd进入项目  ：npm run serve 运行脚本启动  

要到文件目录demo下启动 不能直接cmd

1.4项目目录

public // 静态资源目录 开发环境服务器 监听目录
  index.html
  favicon.ico
src // 源码目录
  api//http 请求目录
  utils（工具存放目录）  
  assets // 存储 静态资源目录
  components // 存储公共组件
  router // 路由配置
  store // vuex 存储目录
  views // 存储路由组件目录
  App.vue // 根组件
  main.js // 入口文件
.browserslistrc  // postcss 定义浏览器兼容
.eslintrc.js // eslint配置文件
babel.config.js// babel的配置文件

1.5webpack中的入口文件

webpack 一切在入口文件src/main.js中引入（包括css 字体图标 js文件 图片）
最终main.js会自动在 页面上的index.html中引入
最终记住：
  1 在main.js中引入资源 或者 写的代码 就相当于 在html中的写的或者引入

  2 main.js引入的资源或者代码 会影响 全部组件（影响全局）

1.6 单文件组件

vue中 组件 参数对象 应该是一个js
定义 当前组件的template结构 自动编译到 组件参数对象template属性上

<template>
  <div>
    <h2>home页</h2>
  </div>
</template>
// 组件对象 在 script 这个标签中定义
<script>
// 不需要定义template属性了 
export default {
  create(){},//初始化调用
  data(){},//和model绑定的数据
  methods: {},//方法
  watch:{},//监听数据
  computed: {}//计算属性
  components{}//子组件注册大厅
} 
</script>
// 定义当前组件的template 标签的样式
<style lang="scss" scoped>

 lang定义使用css的预处理器 和安装时 安装预处理器保持一致
  scoped style写的样式 只针对当前组件有效，不影响其他组件
  需求：
    加scoped情况下 修改 子组件的中样式
  vue提供了一个深度选择器 /deep/，可以穿透 scoped限制
  使用时只需要加在普通选择器之前即可
  /deep/ h2{
    color:red;
  }

2.自定义 项目配置

项目默认配置 配置服务器端口 8080 
eslint保存代码 就检查代码格式
+ 在项目根目录下 创建 vue.config.js
+ 代