Vue cli的使用 和 vue 组件

 vue cli 的使用 :

        1. 在终端下运行的命令，创建指定名称的项目： vue create  项目名称（建议使用英文，不建议有中文和空格,）

        2.vue 项目中 src 目录的构成：

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

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

 (3) main.js 是项目的入口文件，整个项目的运行，要先执行 main.js

 (4) App.vue 是项目的根组件

        3. Vue 项目运行就是将 main.js 把 App.vue 渲染到 index.html 的指定区域中。

 (1) App.vue 用来编写待渲染的 模板结构

 (2) index.html 中需要预留一个 el 区域

 (3) main.js 把 App.vue 渲染到了 index.html 所预留的区域中

        4.

// 导入 Vue 这个包，得到 Vue 构造函数
import Vue from 'vue'
// 导入 App.vue 根组件，将来要把 App.vue中的模板结构，渲染到 html 页面中
import App from './App.vue'

// 方法一
// 创建 Vue 的实例对象
   new Vue({
    // 把 render 函数指定的组件，渲染到 html 页面中

     render: h => h(App),

      }).$mount('#app')


// 方法二  
    new Vue({
      el: '#app'
      // 把 render 函数指定的组件，渲染到 html 页面中

      render: h => h(App),
     })

        5. Vue 实例的 $mount()方法， 作用和 el 属性完全一样!

Vue 组件

1.  组件开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，为了方便项目的开发和维护。

2. vue是支持组件化开发的前端框架。vue中规定：组件的后缀名是 .vue

3. vue组件的三个部分：每个 .vue组件都由这三部分构成（组件是UI结构的复用）     （1）template是组件的模板结构  （2）script 是组件的 JavaScript行为             （3）style是组件的样式 

4. 

    2. template 中只能放一个div，不能多放，如果要放，也要包含在第一个创建的div标签中。

   
   这种写法是错误的
   
   
   
   template 中只能嵌套使用，如下:
   
   

    3.如果要个标签改颜色，需要在style标签中加入  lang="less" 属性