vue-cli 的使用

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
引用自 vue-cli 官网上的一句话：
程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。
中文官网

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

1. 在终端下运行如下的命令，创建指定名称的项目：

   vue cerate 项目的名称
   

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

   assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
   components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
   main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
   App.vue 是项目的根组件。
   

vue组件

1. 组件化开发

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

2. 组件的后缀名是**.vue**, App.vue本质上就是一个vue的组件

3. vue组件的3个部分组成部分

template --> 组件的模板结构

• 每个组件对应的模板结构，需要定义到 <template> 节点中

• template是vue提供的容器标签，只起到包裹性质的作用，它不能渲染为真正的DOM元素

• template中只能包含唯一的根节点

• <template>
  	<!-- 当前组件的DOM结构，需要定义到template标签的内部 -->
  </template>
  

script --> 组件的 JaveScript行为

<script>
//默认导出，这是固定写法
export default {
  //data 数据源
  // 注意： .vue组件中的data不能像之前一样，不能指向对象
  //注意：组件中的data必须是一个函数
  data() {
    //这个 return 出去的{}中,可以定义数据
    return {
      username: 'admin',
    }
  },
  methods: {},
  //当前组件中的侦听器
  watch: {},
  //当前组件的计算属性
  computed: {},
  //当前组件中的过滤器
  filters: {},
}
</script>

.vue组件中的data必须是一个函数，不能直接指向一个数据对象，不然会导致多个组件实例共用同一份数据的问题

style --> 组件的样式

其中，每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分