Vue component 和 vue CLI

使用 Vue.component的注意点：

使用Vue.component(...) 示例代码如下

<div id="app-dands">
  <my-component-dands v-bind:class="{ active: isActive }"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// here component must be defined before ‘var app-dands = new Vue’ 
  Vue.component('my-component-dands', {
    template: '<p class="foo bar">Hi, Vue!</p>'
  });
  var appDands = new Vue({...});

Vue.component() 定义必须在 app-dands new Vue之前，否则如果 Vue.component在后，报错如下：

vue 单文件组件

路径： cn.vuejs.org/v2/guide/si…

使用vue 单文件组件，可以解决 Vue.component在上述网址中的几个缺点.

Vue提供了脚手架 Vue CLI 帮助我们简化环境搭建， vue CLI: cli.vuejs.org/zh/guide/

vue CLI 安装

打开终端，输入安装命令： npm install -g @vue/cli ， 帮助全局安装vue cli.

安装完成后，输入检查命令： vue-version

vue CLI 创建项目

现在创建一个叫vue-demo-dands的工程， 输入安装命令： vue create vue-demo-dands, 出现下图，

如果选择, Default ([Vue 2]...) , 直接按enter 

如果选择, Default (Vue 3...) , 按下箭头, 然后enter 

（选择 Manually..., 本文先不涉及。）

选择 Default ([Vue 2]...) 和 Default (Vue 3...) ， 工程结构相同, 如下图。

注意：入口文件 main.js 里面的内容稍有不同，如果跟着网络教程自学的时候，发现main.js 的内容跟网络上老师的不一样，不用担心。

#如有不对，欢迎指正、讨论、改进、学习一起进步#