vue中的脚手架结构

vue中的脚手架称为CLI:command line interface，命令行接口工具

创建Vue脚手架，vue中脚手架依赖于node.js,所以在搭建脚手架之前要下载好node.js

安装过程：

①全局安装@vue/cil :npm install-g@vue/cil

全局安装时需要配置npm淘宝镜像：npm config set registry https://registry.npm.taobao.org

打开cmd,输入淘宝镜像地址，出现警告不要紧，卡住时按回车。此时安装完毕之后关闭cmd再次搜索vue就不会报错了。

②切换到要创建项目的目录，然后使用命令创建项目 vue creat xxx

在敲写命令时要敲到桌面上，所以要保证目录在桌面上，打开cmd敲写 cd Desktop ， 回车。

(cls可以清空输入历史)

此时就可以创建文件 vue create 文件名（在这个过程中脚手架+案例文件名也就是一个项目了），敲回车选择vue的版本，记住此时让你选择的版本不是vue脚手架版本，是vue的版本，脚手架的版本在最上面已经显示了。

有的时候在等待过程中最终会显示你目前的默认配置较慢，可以选择yes，继续安装

③启动项目npm run serve

在cmd中输入npm run serve运行敲回车运行代码

用Vscode打开新创建的文件，一般来说自操做的文件都在src的文件中

记住这个逻辑，爷爷管儿子，儿子管孙子们

1.main.js这个文件用来引入vue,注册容器，是入口文件，它要去管理自己的儿子，App，（爷爷）

/* 
该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vue实例对象---vm
new Vue({
   el:'#app',
  //下面这行代码一会解释，完成了这个功能：将App组件放入容器中
  render: h => h(App),
  // template:``,
  // components:{App},
})

2.APP.vue这个组件是用来管理components里面的组件的，他既要引入components中的儿子们，也要暴露自己给自己的爹看见。（儿子）

3.components中的组件，要把自己暴露出去，让它们自己被爹给看见。（孙子）

组件1，

组件2