新建一个vue项目及部分使用（Vue-Cli）

MAC环境

1、全局安装vue-cli包（注意旧版本名称是vue-cli而新版本@vue/cli）
npm install -g @vue/cli

2、创建一个项目
vue create hello-world
出现：

意思是让你选择一个预先加载的配置，适合快速创建一个新项目的原型。

直接回车，就会帮你预先配置好babel和eslint插件（预先配置会有点慢，耐心等等～）

ps:不知道是不是网络问题，第二次创建才创建成功

3、目录如下

.gitignore文件的作用
package.json和package-lock.json的区别
4、启动项目

cd hello-world
npm run serve

出现

打开任意链接中的两个就可以访问项目了。

5、改变启动命令
如果你想改变启动时的命令（一般来说也不会去改）
可以修改package.json的命令参数

npm build serve 相当与执行 vue-cli-service serve命令

• vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
• vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。
• 有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令
• 如果添加 "serve": "vue-cli-service serve --open"那么在执行后会自动打开浏览器.。可以查看更多配置选项

6、创建一个组件
先说明一些坑：

• 由于浏览器会把所有大写字符解释为小写字符，那么传给组件的prop如果是小驼峰abcdEfg那么需要改为abcd-efg（这个坑吃过！！！）
• 每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。关于prop
• 每一个组件都是一个vue实例，用export default导出。

创建一个Test.vue文件(组件用大驼峰，这样写好像比较规范？)

<template>
  <div>
      {{msg}}
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    msg: String
  }
}
</script>

在HelloWorld.vue文件中放入
<Test msg = "you are test"></Test>
注意要记得引入文件：
import Test from './Test.vue'
再注册一下：

 components: {
    Test
 }

启动项目就可以看到效果了
7、使用ElementUI

安装ElementUI

npm install  element-ui -s

引入ElementUI

// ...
import ElementUI from 'element-ui';
// ...

Vue.use(ElementUI);
// ...

接下来你就可以在任意文件中引入ElementUI组件了

// ...
    <el-input v-model="input" placeholder="请输入内容"></el-input>
// ...

export default {
  name: 'HelloWorld',
  props: {
    // ... 
  },
  data: function() {
    return {
      input: ''
    }
  },
  components: {
	// ...
  }
}

更多组件戳官网

8、父组件通知子组件
通过props数组
前面也已经有写了，步骤如下：
在父组件中inport进相关子组件Hello，然后在components中注册组件，然后在template中使用使用组件，制定msg信息。如下：

// HelloWorld.vue
<template>
  <div class="hello">
    <Test msg = "you are test"></Test>
  </div>
</template>

<script>
import Test from './Test.vue'

export default {
  name: 'HelloWorld',
  data: function() {
    return {
      input: ''
    }
  },
  components: {
    Test
  }
}
</script>

子组件使用：

// Test.vue
<template>
  <div>
      {{msg}}
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    msg: String
  }
}
</script>

9、子组件通知父组件
子组件使用this.$emit发送信息

// Test.vue
<template>
  <div>
      {{msg}}
      <button @click="testEvent">button</button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    msg: String
  },
  data: function() {
      return {
         inputValue: 'hello test' 
      }
  },
  methods: {
      testEvent: function() {
          this.$emit("sendTest", this.inputValue) 
      }
  }
}
</script>
// HelloWorld.vue
// ...
    <Test msg = "you are test" @sendTest="printTest"></Test>
// ...
  methods: {
    printTest: function(val) {
      this.input = val;
    }
  }

10、路由
静态路由：每个路由应该映射一个组件
静态路由的官网例子
动态路由用法
10-1、安装Vue-Router
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

10-2创建一个简单的路由
先创建链接页面

// HelloWorld.vue
<!-- router-link 定义点击后导航到哪个路径下 -->
<router-link to="/test1">Test1</router-link>
<router-link to="/test2">Test2</router-link>

<!-- 对应的组件内容渲染到router-view中 -->
<router-view></router-view>   

创建对应组件

// Test1.vue

<template>
  <div>
      Hello, i am Test1
  </div>
</template>

<script>
export default {
  name: 'Test2'
}
</script>
// Test1.vue

<template>
  <div>
      Hello, i am Test2
  </div>
</template>

<script>
export default {
  name: 'Test2'
}
</script>

10-3 、在 src目录下再新建一个router/router.js 定义router, 就是定义 路径到 组件的 映射。

---router
------index.js
------router.js
其中index用来配置路由
router.js定义 路径到 组件的 映射

// router.js
// 引入组件
// 引入组件
import Test1 from "@/components/Test1.vue";
import Test2 from "@/components/Test2.vue";

const routes = [
    {
        path:"/test1",
        component: Test1
    },
    {
        path: "/test2",
        component: Test2
    }
]


export const routers = [
    ...routes
];

// index.js
import Vue from 'vue'
import { routers } from './router'
import VueRouter from 'vue-router'

// 使用VueRouter
Vue.use(VueRouter)

// 路由配置
const RouterConfig = {
  routes: routers
}

// 创建VueRouter 实例
export const router = new VueRouter(RouterConfig)

10-4 路由注入到根实例，这样就能在整个应用下使用

// main.js
// ..
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
// ..

启动项目之后就可以在两个链接之间切换路由了。
11、我想弄个vuex
11-1、安装vuex

npm install vuex --save

11-2、在实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到

// main.js
new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

此时在Test1.vue中使用
<div>{{ this.$store.state.count }}</div>
就可以在Test1.vue对应的模块中看到store仓库中的count啦。
这样写不会太麻烦了嘛？如果多处用到这个状态，就会导致代码很杂乱。而且这也不是MVVM模式啊，想到实时响应数据，我们会想到computed属性：

  computed: {
    count () {
      return this.$store.state.count
    }
  }

这样：
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
更多例子暂不更新了，可以戳官网查看。