Day19 Vue基本教学(一)

Vue.js介绍

是一个用於建立使用者介面的开源JavaScript框架，也是一个建立单页应用的Web应用框架。2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该专案平均每天能收获95颗星，为Github有史以来星标数第3多的专案。
它提供了很多有用的功能来达到渐进增强的策略。与其他的框架不同的是，你可以把Vue和既有的HTML做整合，这让你可以像使用插入性替换的函式库一样来使用Vue，就像使用JQuery一样。

除此之外，也可以使用Vue写一个单页式应用程序。用Vue来建构网页，当处理较复杂的应用时有较好的开发效率及体验。 Vue也有提供函式库来做客户端路由及状态管理。Vue对客户端路由及状态管理这些工具采取中间立场的态度，虽然 Vue的核心团队推荐使用这些函式库，但是这些函式库没有直接打包进Vue，而是让你可以自由选择使用其他更适合你的应用的路由库或状态管理库。

除了可以渐进地把Vue整合到应用程序里，Vue也提供了渐进式的方法来撰写网页内容。就像大部分的框架，Vue让你创造可以重复使用的网页内容区块。大部分时候，Vue元件是用一种特殊的HTML样板语法写成的，然而在一些场景使用HTML语法会有限制时，可以使用JSX或是Javascript函式来定义你的元件。

安装

如果要在既有的专案中使用Vue，可以把以下任一个script标签加到你的页面中，这样你就可以开始在专案中使用Vue ，这也是为什麽Vue宣称自己是一个渐进式的框架。它提供了一个很好的机会，你可以把一些使用函式库，像是JQuery 的专案转变成使用Vue ，如此一来，就可以使用很多Vue的核心功能，像是属性、客制化元件以及资料管理。

• 开发环境版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 产品环境版本

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

然而，以上方法有一些限制。若要建置一些较复杂的应用程序，需要使用 Vue NPM 套件。 这让你可以使用 Vue 的进阶功能且可以使用打包器像是 WebPack。为了让使用Vue建置应用程序变得更容易，可以使用CLI来精简化开发流程。如果要使用 npm 套件 & CLI ，将需要：

1. 安装 Node.js 8.11+
2. npm 或 yarn

在终端机执行以下命令来安装 CLI ：

npm install --global @vue/cli

比较喜欢使用 yarn 的话：

yarn global add @vue/cli

安装完 CLI 後，在你想要创建专案的资料夹内开启终端机然後执行 vue create 来初始化专案。 CLI 将会给你一连串专案组态，有些设定有预设值，而你可以更改成你自己的设定。这些选项让你可以在专案里配置 TypeScript 、 linting 、 vue-router 、 Testing 等等。