vue-cli介绍与安装

vue-cli是vue.js开发工具，帮助程序员配置webpack

安装和使用：

安装：npm install -g @vue/cli

vue create demo-first

cd 要按安装的项目名

npm run serve

创建成功后，选择配置，最后创建出demo-first文件。

vue项目中的src目录构成：

assets文件夹：存放项目中用到的静态资源文件，例如：css样式表，图片资源

components文件夹：程序员封装的，可复用的组件，都要放到components目录下

main.js项目的入口文件

app.vue是项目的跟组件

 vue组件组件的三个组成部分：

独立可重用的软件模块。

vue是一个支持组件化开发的前端框架。

vue中规定：组件的后缀名是.vue。app.vue便是vue的一个组件。

可以分为三个部分:

template，模板结构中必须只有一个根节点。

script,组件中的data必须是个函数，属性包含在return中

style

以app.vue为例：

<template>
  <div id="app">
  <h3>{{user}}</h3>
  <button @click="change">修改用户名</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      user:"lwy"
    }
  },
  methods:{
    change(){
      console.log(this)
      this.user="娃哈哈"
    }
  }
}
</script>

<style lang="less" >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: red;
  margin-top: 60px;
  h3{
    color:blue
  }
}
</style>

vue组件在被封装好之后，彼此之间是相互独立的，不存在父子关系。在使用组件的时候，根据彼此的嵌套关系，形成了父子，兄弟关系。

使用组件的三个方式：

1.使用import语法导入需要的组件。 

import left from '@/components/left.vue'

2.使用components节点注册组件

export default{

components:{"left":left}}

3.以标签形式，使用注册好的组件。

<left></left>

注册全局组件：

在Vue项目中的main.js入口文件中，通过vue.component()方法，可以注册全局组件。

import Count from '@/components/Count.vue'
Vue.component('MyCount',Count)

后面直接在需要的文件中导入<MyCount></MyCount>