vue的安装、使用和常用插件安装
V U E 教 程一、安装1、直接使用script标签和CDN进行引用2、使用npm命令安装(1)安装npm:node.js下的包管理器。直接下载安装最新版的node.js就可以使用npm命令。网址:http://nodejs.cn/download/(2)安装vue命令:npm install vue3、查看Vue版本vue -V4、安装最新的Vue-clinpm install -g @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-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
更多推荐
所有评论(0)