Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
安装
1. 直接从https://vuejs.org/js/vue.min.js下载vue.min.js并用<script>标签引入。
2. 联网使用CDN，如<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
https://cdn.staticfile.org/vue/2.2.2/vue.min.js国内
https://unpkg.com/vue/dist/vue.js
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3. NPM方法
$ npm install -g vue --registry=https://registry.npm.taobao.org
# 全局安装 vue-cli
$ cnpm install --global vue-cli // 或
$npm install -g vue-cli --registry=https://registry.npm.taobao.org
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project #配置，默认回车即可
依赖包都安装在node_modules中，编译出的可执行文件位于node_modules/.bin目录下。
目录结构
|
目录/文件 |
说明 |
|
build |
项目构建(webpack)相关代码 |
|
config |
配置目录，包括端口号等。我们初学可以使用默认的。 |
|
node_modules |
npm 加载的项目依赖模块，编译出的可执行文件位于.bin目录下。 |
|
src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
|
static |
静态资源目录，如图片、字体等。 |
|
test |
初始测试目录，可删除 |
|
.xxxx文件 |
这些是一些配置文件，包括语法配置，git配置等。 |
|
index.html |
首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
|
package.json |
项目配置文件。 |
|
README.md |
项目的说明文档，markdown 格式 |
组件
组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
prop是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
<script>
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{todo.text}}</li>'
})
new Vue({
el: "#app5",
data: {
groceryList:[
{id: 0, text: "orange"},
{id: 1, text: "apple"},
{id: 2, text: "banana"}
]
}
})
</script>
路由
Vue.js路由允许通过不同的URL访问不同的内容。通过vue.js可以实现多视图的单页web应用。
Vue.js 路由需要载入vue-router 库，中文文档地址：vue-router文档。
https://unpkg.com/vue-router/dist/vue-router.js cnpm install vue-router
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。<router-link> 默认会被渲染成一个 `<a>`。
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
<router-link>相关属性
to：表示目标路由的链接。当被点击后，内部会立刻把to值传到router.push()，这个值可以是一个字符串或描述目标位置的对象。
replace：调用router.replace()而不是router.push()，导航后不会留下history记录。
append：设置append属性后，则在当前（相对）路径前添加其路径。
tag：把<router-link>渲染成某种标签，例如<li>。
active-class：设置链接激活时使用的CSS类名。
exact-Active-class：配置当链接被精准匹配的时候应该激活的class。
event：声明可以用来触发导航的事件，可以是一直字符串或一个包含字符串的数组。
Webpack
参考：webpack中文文档https://www.webpackjs.com/concepts/
Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
Webpack默认配置文件名为webpack.config.js，从webpack v4.0.0开始，可以不用引入一个配置文件。然而，webpack仍然是高度可配置的。四个核心概念：入口entry，出口output，loader，插件plugins。
entry
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。每个依赖项随即被处理，最后输出称之为bundles的文件中。可以在webpack配置中配置entry属性，来指定一个入口起点（或多个入口起点），默认值为./src。
module.exports = { entry: './path/to/my/entry/file.js' };
output
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}};
loader
Loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）。Loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack打包能力，对它们进行处理。本质上，webpack loader将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接应用的模块。
在更高层面，在webpack的配置中loader有两个目标：
test属性，用于标识出应该被对应的loader进行转换的某个或某些文件。
use属性，标识进行转换时，应该使用哪个loader。
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
}};
module.exports = config;
以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。
插件
Loader被用于转换某些类型的模块，而插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
模式
通过选择 development 或 production 之中的一个，来设置 mode 参数，可以启用相应模式下的 webpack 内置的优化。
module.exports = { mode: 'production' };
Webpack-dev-server
Webpack-dev-server启动一个使用express的Http服务器，作用为伺服（或监控）资源文件。这个HTTP服务器和client使用websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时地编译，但是最后编译的文件并没有输出到目标文件（默认bundle.js），而是都保存在内存中。
--content-base用于指定伺服的directory。可通过在webpack.config.js中执行publicPATH指定base路径。
--quiet 控制台中不输出打包的信息
--compress 开启gzip压缩
--progress 显示打包的进度
应用
网页应用
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
网页显示：Hello Vue.js!
Vscode配置.vscode/launch.json：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "file": "index.html" } ] }
参考：