vue的安装、使用和常用插件安装 |
您所在的位置：网站首页 › vue的安装命令 › vue的安装、使用和常用插件安装 |
vue的安装、使用和常用插件安装
|
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-devtools2、在vue-devtools目录下安装依赖包（必须在管理员权限下安装） npm install3、 修改manifest.json文件把"persistent":false改成***true*** 4、编译代码 npm run build5、扩展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 组件 // 插件会自动将代码转化为方式二中的按需引入形式 主要按钮 方式二. 手动按需引入组件在不使用插件的情况下，可以手动引入需要的组件 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，也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。
~/.vuerc 被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。 在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。 vue create 命令有一些可选项，你可以通过运行以下命令进行探索： vue create --help 用法：create [options] 创建一个由 `vue-cli-service` 提供支持的新项目 选项： -p, --preset 忽略提示符并使用已保存的或远程的预设选项 -d, --default 忽略提示符并使用默认预设选项 -i, --inlinePreset 忽略提示符并使用内联的 JSON 字符串预设选项 -m, --packageManager 在安装依赖时使用指定的 npm 客户端 -r, --registry 在安装依赖时使用指定的 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上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
|
如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。我们会在下一个章节讨论 preset 和插件。
【本文地址】