V U E 教 程
一、安装
1、直接使用script标签和CDN进行引用
2、使用npm命令安装
（1）安装npm：node.js下的包管理器。直接下载安装最新版的node.js就可以使用npm命令。网址：http://nodejs.cn/download/
（2）安装vue命令：npm install vue
3、查看Vue版本
vue -V4、安装最新的Vue-cli
npm install -g @vue/cli5.创建Vue项目(这里要先 cd 进入需要创项目的目录 )
vue create projectname6、vue-devtools vue调试工具的安装和使用
- 1、下载
- https://github.com/vuejs/vue-devtools
- 2、在vue-devtools目录下安装依赖包（必须在管理员权限下安装）
npm install- 3、 修改manifest.json文件把"persistent":false改成***true***
- 4、编译代码
npm run build- 5、扩展Chrome插件
- Chrome浏览器 > 更多程序 > 拓展程序
- 选择 vue-devtools-dev > shells > chrome
二、插件以及工具的安装
1、JQuery的安装
npm install jquery --save-dev
在main.js中添加
import $ from 'jquery'2、axios安装
npm install axios --save-dev
在main.js中添加
import axios from 'axios'
Vue.prototype.$axios = axios3、BootStrao安装
npm install bootstrap -S
npm install --save popper.js
在main.js中添加
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'font-awesome/css/font-awesome.min.css'4.ElementUI安装
npm i element-ui -S
在main.js中添加
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);5.Vant安装
简写形式：npm i vant -S
完整形式：npm install vant -save
如果网速慢的情况下可以使用淘宝镜像安装，不建议使用cnpm
npm install vant --save --registry=https://registry.npm.taobao.org1、方式三. 导入所有组件Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);2、手动按需引入（在不使用插件的情况下，可以手动引入需要的组件）
import Button from 'vant/lib/button';
import 'vant/lib/button/style';3、方式一. 自动按需引入组件 (推荐)
说明：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
安装插件babel-plugin-import
# 安装插件
npm i babel-plugin-import -D在.babelrc 中添加配置 // 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
Vue.use(Button);// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};// 接着你可以在代码中直接引入 Vant 组件 // 插件会自动将代码转化为方式二中的按需引入形式
<van-button type="primary">主要按钮</van-button>方式二. 手动按需引入组件
在不使用插件的情况下，可以手动引入需要的组件
import Button from 'vant/lib/button';
import 'vant/lib/button/style';6.MintUI安装
// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);三、补充创建项目内容
1.打开cmd窗口
2.cd 进入到需要创建项目的目录下
3.运行以下命令来创建一个新项目：
vue create hello-world警告
如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效。
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。我们会在下一个章节讨论 preset 和插件。
~/.vuerc
被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。
vue create 命令有一些可选项，你可以通过运行以下命令进行探索：
vue create --help用法：create [options] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目
选项：
-p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项
-d, --default 忽略提示符并使用默认预设选项
-i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端
-r, --registry <url> 在安装依赖时使用指定的 npm registry
-g, --git [message] 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git 跳过 git 初始化
-f, --force 覆写目标目录可能存在的配置
-c, --clone 使用 git clone 获取远程预设选项
-x, --proxy 使用指定的代理创建项目
-b, --bare 创建项目时省略默认组件中的新手指导信息
-h, --help 输出使用帮助信息使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目：
vue ui上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
四丶删除node_modules 删除之后，输入以下命令(一定这个顺序)：
1 npm install vue-template-compiler -D
2 npm install
3 npm run dev
