使用yarn搭建Vue,ElementUI,axios环境

最新推荐文章于 2024-04-12 03:14:14 发布

原创最新推荐文章于 2024-04-12 03:14:14 发布 · 3.5k 阅读

12 ·

CC 4.0 BY-SA版权

NodeJS 专栏收录该内容

3 篇文章

订阅专栏

本文档介绍了如何使用Yarn在Windows环境下搭建Vue项目，并集成ElementUI和axios。步骤包括安装Yarn，搭建vue脚手架，创建并启动element_demo项目，安装ElementUI和axios，最后在main.js中引入这些库。

使用yarn搭建Vue,ElementUI,axios环境

1. 安装Yarn

windows下Yarn安装

2. 搭建vue、ElementUI、axios环境

2.1 安装webpack

yarn global add webpack

2.2 安装vue脚手架

yarn global add vue-cli

2.3 创建vue项目element_demo

vue init webpack element_demo

? Project name element_demo				--项目的名称，直接默认回车
? Project description A Vue.js project		--项目描述，直接默认回车
? Author admin <xxxxxxxxx@qq.com>	 --作者姓名，输入名字（syf）回车
? Vue build standalone							--默认即可，运行时+编译器:推荐给大多数用户
? Install vue-router? Yes							--是否安装路由，输入Y回车
? Use ESLint to lint your code? Yes		--是否用ESLint规范代码，输入Y回车
? Pick an ESLint preset Standard			--会让你选择使用哪个文件
? Set up unit tests No								--是否需要单元测试，输入n回车
? Setup e2e tests with Nightwatch? No	--是否需要单元测试，输入n回车
? Should we run `npm install` for you after the project has been created? 	(recommended) yarn 这里我选择的是yarn

2.4 安装ElementUI

进入项目目录，添加element-ui依赖

 cd element_demo
 
 yarn add element-ui

在main.js中添加如下:

 import ElementUI from 'element-ui';
 
 import 'element-ui/lib/theme-chalk/index.css';
 
 Vue.use(ElementUI);

2.5 安装axios

进入项目目录，添加axios依赖
```
 yarn add axios
```

在main.js中添加如下：

 import axios from 'axios'
 
 Vue.prototype.$http = axios

3. 启动项目

	yarn run dev