二.介绍项目的目录结构

用VsCode打开我们创建的项目。

会看到如下的目录：

我们的页面被放到public的index.html中去了。打开index.html

src目录的构成：

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

components文件夹：程序员封装的一些，可复用的组件，都要封装到components目录下。

main.js文件: 项目的入口文件，整个项目的运行，要先执行main.js。

App.vue文件:是项目的根组件。我们浏览器上看到的页面结构就是App.vue里面所呈现出来的。

我们可以把App.vue文件里面的代码全部删除掉，然后自己编写代码如下代码：

<template>
  <h1>App.vue组件！</h1>
</template>

template表示一个模板结构，里面的h1表示要把它渲染到页面上去。

三.了解vue项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中。

打开main.js的代码，下面来对其代码进行解释：

//导入vue这个包，得到Vue构造函数
import Vue from 'vue'
//导入App.vue这个根组件，将来要把App.vue中的模板结构渲染到HTML页面中
import App from './App.vue'
//开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。
Vue.config.productionTip = false
//创建Vue的实例对象，
new Vue({
  //把rander函数指定组件，渲染到指定区域中去,替换掉#app的这个<div>
  render: h => h(App),
}).$mount('#app')
//这个 .$mount('#app'),就是指定渲染的指定区域。
//其实可以把它去掉，然后在render前面添加一个el:'#app',效果也是一样的。
//其实index.html里面那个<div id="#app"></div>只起到占位作用，会被App.vue里面的指定组件给替代掉 

vue实例的$mount()方法与el属性的作用是完全一样的。

四.组件的基本使用

在src目录下面创建一个Test.vue，然后自己声明一个模板结构

<template>
    <div>
        <h3>这是用户自定义的Test.vue</h3>
    </div>
</template>

接下来，在main.js中导入我们自定义的模板结构:

import Test from './Test.vue'

然后把render里面指定的组件给换成Test:

new Vue({
  //把rander函数指定组件，渲染到指定区域中去,替换掉#app的这个<div>
  render: h => h(Test),
}).$mount('#app')

浏览器打开项目的网页，则会显示我们上面Test.vue自定义的内容：

这是我学习vue-cli的笔记，有点短，但的确入门这些就够了。从这里开始，后面我学习vue就不再是自己创建html等文件了，而是用vue-cli来自动生成和配置前端工程化项目了。接下来我要学习vue组件和其他新知识了。 希望这篇博客对你们和未来复习的我有所帮助吧。

五.用vue ui 可视化创建项目

我们可以用vue ui来创建可管理我们的项目。主要在命令行下运行vue ui 这个命令就可以。

创建好后，项目运行方式如下：

当项目编译完成后，点击“启动app”把项目跑起来：