VUE

VUE简介

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

VUE安装

1.独立版本

我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。

2.使用 CDN 方法

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

3.NPM 方法

因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js。在官网下载安装完node.js后，查看node版本。同时npm也安装好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 查看版本
$ npm -v
2.3.0

#将 npm 更新至最新版本
npm -g install npm

#安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

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

#升级 npm
cnpm install npm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装，cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用：

1
2
# 最新稳定版
$ cnpm install vue@next

命令行工具

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

1
2
3
4
5
6
7
# 全局安装 vue-cli
$ cnpm install -g @vue/cli
npm install -g vue-cli

# 安装完后查看版本
$ vue --version
@vue/cli 4.5.11

注意：vue-cli 3.x 和 vue-cli 2.x 使用了相同的 vue 命令，如果你之前已经安装了 vue-cli 2.x，它会被替换为 Vue-cli 3.x。

安装 @vue/cli-int：

1
$ cnpm i -g @vue/cli-init

node版本

npm版本

vue版本

vue-cli版本

前端版本会有不兼容问题

注意：Vue.js 不支持 IE8 及其以下 IE 版本。

4.安装yarn

1.使用msi安装：

首先进入yarn的官网 https://yarn.bootcss.com/docs/install/#windows-stable，然后选择稳定版进行下载。然后双击安装即可

2.通过npm命令进行安装：

执行命令npm install yarn -g （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中。

yarn和npm都是包管理工具，但是yarn是崭新的，经过重新设计的npm客户端，于2016年10月发布，相比于npm，yarn在运行速度上有显著的提升，安装时间变少，功能上也有很多改进

创建VUE项目

直接使用命令行构建项目

1.新建一个文件夹，自行选择位置。

2.文件夹里打开cmd，输入 vue init webpack 项目名字 （这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数）

接下来会让你确认项目名字，描述，作者，build，是否安装vue-router（选是Y），是否安装es-lint（代码质量）

3.可以看到文件夹里生成了VUE项目

4.在项目里打开命令行，执行命令 npm run dev

使用webstorm

按步骤新建项目。可以在控制台上输入命令。也可以在package.json 文件上点击右键，选择 show npm scripts，双击命令运行。也可以在右上角选择npm命令运行。

VUE的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
vue-cource // 项目名称
    |__ node_modules // 项目中的node依赖包
    |__ public // public文件夹放公共文件
    |    |__ favicon.ico // 标签栏的小图标
    |    |__ index.html // 模板文件，最后打包后的index.html模板就是这个文件
    |    
    |__ src // 项目主文件
    |    |__ api // api文件夹，项目的接口js文件都可以写在这里
    |    |__ assets // 静态资源（图片、字体图标文件）
    |    |    |__ img // 图片文件夹
    |    |    |__ font // 字体图标文件夹
    |    |
    |    |__ components // 组件
    |    |__ config // 项目的配置（全局变量js文件）
    |    |    |__ index.js     
    |    |
    |    |__ directive // vue的自定义指令文件夹
    |    |    |__ index.js     
    |    |
    |    |__ lib // 全局方法放在这里
    |    |    |__ util.js // 与业务结合的工具方法
    |    |    |__ tools.js // 与业务无关的工具方法(例如日期转换时间戳方法)
    |    |
    |    |__ mock // 模拟数据文件夹
    |    |    |__ index.js
    |    |
    |    |__ router // 路由文件夹
    |    |    |__ index.js // 路由配置文件
    |    |    |__ router.js // 拆分出来的routes数组
    |    |__ store // Vuex配置文件夹
    |    |    |__ module          // 模块文件夹
    |    |    |__ plugin          // Vuex插件文件夹
    |    |    |__ actions.js      // 异步调用接口方法都写在这里
    |    |    |__ getters.js      // Vuex的计算属性都写在这里
    |    |    |__ index.js        // Vuex主要配置管理文件
    |    |    |__ mutations.js    // Vuex中的修改state的方法，都写在这里
    |    |    |__ state.js        // Vuex的变量文件夹
    |    |
    |    |__ views // 页面都写在这个文件夹中
    |    |__ App.vue // 基础组件。项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
    |    |__ main.js // 项目入口文件（项目引入全局插件都在这里引入）项目的核心文件
    |    
    |__ .browserslistrc // 浏览器兼容
    |__ .editorconfig // 编译器配置文件
    |__ .eslintrc.js // 配置ESlint规则文件
    |__ .gitignore // git提交的忽略文件
    |__ babel.config.js // babel的配置文件，babel可以将es6、es7等等装换成es5兼容的代码
    |__ package-lock.json // 锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致
    |__ package.json // 项目名称、项目版本、项目描述、项目运行的一些脚本（依赖）
    |__ postcss.config.js // css自动补充一些兼容性代码的配置（-webkit-、-moz-、-ms-之类的）
    |__ README.en.md // 英文版项目说明
    |__ README.md // 中文版项目说明
    |__ vue.config.js // 配置文件

public/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
        <!-- built files will be auto injected -->
	</body>
</html>

就是一个普普通通的 html 文件，让它不平凡的是 <div id="app"></div> ，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。

src/App.vue

这个文件称为“根组件”，因为其它的组件又都包含在这个组件中

vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
	<div id="app" v-wechat-title="$route.meta.title">
		<router-view />
	</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
	body {
		-webkit-font-smoothing: antialiased;
		padding: 0;
		margin: 0;
		font-family: 'PingFang SC';
		height: 100%;

	}
	#app {
		height: 100%;
	}
</style>

这里的<div id="app">,id=app 只是跟下面的 css 对应.

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一起加油吧！