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 -V

4、安装最新的Vue-cli

npm install -g @vue/cli

5.创建Vue项目(这里要先 cd 进入需要创项目的目录 )

vue create projectname

6、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 = axios

3、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.org

1、方式三. 导入所有组件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