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

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

• • 1. 安装Yarn
  • 2. 搭建vue、ElementUI、axios环境
  • • 2.1 安装webpack
    • 2.2 安装vue脚手架
    • 2.3 创建vue项目element_demo
    • 2.4 安装ElementUI
    • 2.5 安装axios
  • 3. 启动项目

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 <[email protected]>	 --作者姓名，输入名字（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

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

    cd element_demo
    
    yarn add element-ui 
   

2. 在main.js中添加如下:

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

2.5 安装axios

1. 进入项目目录，添加axios依赖

    yarn add axios
   

2. 在main.js中添加如下：

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

3. 启动项目

	yarn run dev