看程序学Vue.js 16- VUE-CLI 3 教程

步骤 1 : vue-cli 概念
什么是 vue-cli 呢？
vue-cli 是 vue 出来的一个脚手架，可以进行 组件式地开发。
但是要运用 vue-cli , 必须要有 node.js 和 webpack 的基础，否则里面很多命令既运行不了，也无法理解。
所以没有 node.js 和 webpack 基础的同学， 请先学习这两门课程：
node.js 入门教程
webpack 入门教程
步骤 2 : 准备项目目录
准备目录

E:\project\vue-cli

步骤 3 : 安装 vue-cli
vue-cli 截止目前是出到3了。 接下来的教程都是以3为基础做的。

安装命令：

npm install -g @vue/cli@3.0.1

注意，这个版本号一定要跟，如果不跟，那么就是安装vue-cli 的最新版本。 目前 （2018-08-19） 其最新版本是 3.0.1。 但是如果过几个月，你才看到这个教程的话，说不定 vue-cli 的版本就是 4.0了。 而不同版本的做法区别很多，本教程是基于 3.0.1 做的，所以安装的时候一定要加上 3.0.1 ，否则错版本的教程就没有意义了。
步骤 4 : 查看版本
安装成功之后，可以通过如下命令查看版本

vue --version

步骤 5 : 原型工具
vue-cli 提供了一个很方便的原型工具，按照如下方式安装

npm install -g @vue/cli-service-global@3.0.1

步骤 6 : test.vue
在项目下新建一个 test.vue 文件，然后用随便什么编辑器在里面输入如下内容。

<template>
  <h1>Hello Vue-Cli</h1>
</template>

步骤 7 : 运行命令
然后运行命令

vue serve test.vue

就会提示，让打开如下 URL 进行测试：

http://localhost:8081/
步骤 8 : 打开测试地址
打开测试地址就会看到如图所示。。。 这就表示 vue 跑起来了~

http://localhost:8081/
步骤 9 : 关于 vue 文件
回顾前面学习的组件知识： vue.js 组件， 虽然 vue 可以通过 组件的方式重复使用很多代码，但是 方式有一些缺陷：

1. 组件用 ‘’ 方式写，如果比较复杂，写起来麻烦
2. 组件里 不包含 js
3. 组件里不包含 css
   而用 vue 就可以化解这个问题。
   下个步骤把 test.vue改造一下。
   步骤 10 : test.vue
   把 test.vue改造一下。
   html部分放在 标签里
   提供数据部分放在

这就是一个可以有比较完整功能的组件了

<template>
  <p>{{greeting}}  Vue-Cli</p>
</template>
 
<script>
 
export default {
    data () {
        return {
            greeting: 'Hi'
        }
    }
}
</script>
 
<style scoped>
    p{
        font-size: 2em;
        text-align:center;
        color:blue;
    }
</style>

步骤 11 : 重新运行
再运行命令

vue serve test.vue

然后在测试地址观察

http://localhost:8081/
步骤 12 : 创建项目
刚才的例子是仅仅基于 test.vue 这么一个单个文件。
接下来，通过 vue-cli 创建一个项目

vue create hello-world
步骤 13 : 运行项目
创建好之后，执行如下命令运行项目

cd hello-world
npm run serve
步骤 14 : 访问测试地址
访问测试地址：

http://localhost:8081/

如图所示，这就启动了一个 vue 项目， 其实就是启动了 main.js 文件

E:\project\vue-cli\hello-world\src\main.js

间接得加载了 App.vue，然后又间接地加载了 components/HelloWorld.vue 文件。
HelloWorld.vue文件里，就是上面这些 html 超链了。。。

步骤 15 : vue-cli 缺点
vue-cli ，单页应用 SPA(single page application) 开发的时候是很方便的，但是多页复杂系统的话用起来就比较麻烦了。
并不是 vue-cli 不支持 多页系统， 而是为了让 vue-cli 支持多页系统，需要额外装很多插件和工具，用起来就相当的麻烦。。。