【九月打卡】第7天 vue入门学习

课程名称：vue2.5入门

课程章节：

第4章 Vue-cli的使用

主讲老师：Dell

课程内容：

     Vue-cli的使用

课程收获：

1、先去安装node,安装完node自动安装npm

1）、npm install --global vue-cli 全局安装vue脚手架工具  vue-cli

2）、vue init  webpack   my-project   

创建一个基于webpack模版的新项目 项目名称不能有大写字母

3）、cd my-project   进入到项目目录

4）、npm run dev   运行项目

自动生成代码目录结构

build目录下放置的是项目的webpack配置文件，可以不动

config是针对线上环境和开发环境的配置文件，也可以不动

node_modules 指的是项目的依赖

src 指的是源代码放置的目录

static放置的是静态的资源

src中的main.js文件是整个项目的入口文件

vue-cli提供了一种新的vue的编码语法：单文件组件（一个.vue文件中包含了一个组件里必须的所有内容）

vue-cli的优势：

可以使用es6；一个组件是一个.vue的文件所定义的，实现了组件的封装。

2、template模板里面只能有一个包裹元素，最外部用一个<div>包裹

data以前是个数据 ，现在是个函数

父组件通过属性的形式给子组件传值

子组件在props里面接收，声明对content（父组件所传递值）的使用

3、组件样式作用域：通过在style上添加scoped标签将作用域限制到本组件中。如果不添加该标签，则将变为全局样式