文组也能看得懂的网页前端Vue （二）建立基本页面

这一篇主要叙述如何建立一个看起来厉害的vue专案

下面这个网址是VUE的官方网站

https://cn.vuejs.org/v2/guide/

虽然是中文网页，但是对于没写过前端的人来说，应该从“介绍  vue是什么?" 这边开始就看不是很懂了。

上一篇简介说过，我不打算介绍专有名词跟原理，

所以....跳过吧

网路上教学大部分会从用CDN引入vue.js开始，不过这样接下来还要安装引用不少东西，

如果要包装网页还要用webpack，

路由还要写router.js，

还要额外写Layout，

恩...又是一堆专有名词

所以...跳过！

最简单的方式就是拿别人做好的範本直接拿来用，

如果有别人盖好的房子，我们何必自己砌墙呢？

我们到下面的网址

https://github.com/ElementUI/element-starter

可以看到页面上这个绿色按钮 Clone or download

按下后选择Download ZIP 下载回来后解压缩，会得到以下档案

这时开启安装好的VSCode ，

选择「档案」-> 「开启...」

点选刚刚解压缩的资料夹开启，应该就会把整个资料夹档案读进来VSCode

接下来我们来看看README.md，

点选README.md 内容就会出现在右边的视窗里

这边可以看到一些开发跟发布的指令，看不懂没关係下面会一步一步做。

首先先点选工具列的『终端机』->『新增终端机』，

或是直接按 command+J (windows按 Ctrl+J)

这时下方会出现一个新个分割视窗

如果之前有安装yarn的，请在终端机输入

yarn

后按下enter

如果没有就输入

npm install

后按下enter

这时就会自动安装一些这个网站需要的套件

等他跑完后

输入

npm run dev

或是

yarn run dev

按下 enter

这时会跑一大堆像咒文的东西，看不懂也没关係。

直到跑出

webpack: Compiled successfully.

这一行之后，

我们就可以开启Chrome，

网址输入

http://localhost:8010/

这时就可以看到第一个VUE网页起来了

如果要关掉就在刚刚终端机的部分输入

ctrl+c

(windows输入ctrl+c 然后他会询问是否要关闭，输入Y后enter)

就可以关闭了

这篇先讲到这

下一篇预计会开始谈一些按钮、输入框之类的实用功能