Vue.js一课一得（基本介绍）

学习Vue.js这个课程，首先要了解Vue的基本内涵

渐进式框架​

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

1.无需构建步骤，渐进式增强静态的 HTML

2.在任何页面中作为 Web Components 嵌入

3.单页应用 (SPA)

4.全栈 / 服务端渲染 (SSR)

5.Jamstack / 静态站点生成 (SSG)

6.开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

课程重点
1.Vue 实例
Vue 实例是Vue.js 的核心，它负责管理数据和DOM。我们学习了如何创建Vue 实例、注册全局组件、使用生命周期钩子函数等。vue实例的操作和应用也是该课程的基本学习方式。

2.模板语法
Vuejs 使用基于 HTML的模板语法，允许我们声明式地将已存在的DOM 绑定至Vue 实例的数据。我们学习了如何使用插值、指令、过滤器等。这些都一定程度上有利于我们熟悉企业项目的开发基本应用。

3.组件
组件是Vue.js 的重要特性之一，它允许我们封装可重用的代码块。我们学习了如何创建组件、使用组件属性 （props、events、slots）、实现父子组件通信等。我们将从创建一个组件每个项目开始。在这一过程中，我们将学习一些重要的概念，例如在其他组件中调用组件，通过道具向它们传递数据，以及保存数据状态。

4.路由
Vue Router 是 Vue.js 的官方路由管理器，它允许我们根据不同的URL 展示不同的内容。我们学习了如何安装和使用 VueRouter、定义路由路径、使用路由守卫等。<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。在实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。

5.状态管理
Vuex是Vuejs 的状态管理横式和库，它允许我们在多个组件之间共享状态。我们学习了如何安装和使用Vuex、定义状态使用 getter和 mutation等。

Vue.js 安装

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

下载 Vue.js

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

• unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

Staticfile CDN（国内）

<div id="app"> <p>{{ message }}</p> </div>

unpkg（推荐）

<div id="app"> <p>{{ message }}</p> </div>

cdnjs

<div id="app"> <p>{{ message }}</p> </div>

3、NPM 方法

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装：

# 最新稳定版
$ cnpm install vue

---

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

注意：运行之前需要打开终端输入 npm run serve启动网页

以上是一些基本运行截图

其中利用了组件工具Element - 网站快速成型工具

组件基本上都可以在上面找到，希望在Vue.js的学习中变得优秀