有你在真好 的个人博客
Vue.js2.X + ElementUI开发环境搭建
阅读:2045 添加日期:3/30/2021 5:42:58 PM

一、开发前准备:

Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js(官方地址:
https://nodejs.org/en/download/)

注意:安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度是超级慢啊。所以我们要安装cnpm,cnpm是淘宝对npm的镜像服务器,这样依赖的包安装起来就快多了。

安装命令为:npm install -g cnpm -- re registry=
https://registry.npm.taobao.org

开发前,请先熟悉下面文档

ES6:http://es6.ruanyifeng.com

Vue.js:https://vuefe.cn/v2/guide/

Element UI:http://element.eleme.io/#/zhCN/component/installation


vuex:https://vuex.vuejs.org/zh-cn/(数据状态管理)


vue-router:https://router.vuejs.org/zh-cn/(路由)


axios:https://github.com/mzabriskie/axios(Ajax框架,后端请求)

二、根据官方指引,构建项目框架(可以将npm改为cnpm)

# 安装vue$ npm install vue@2.1.6# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目my-project$ vue init webpack my-project# 进入项目目录

$ cd my-project# 安装依赖$ npm install# 运行项目$ npm run dev

三、项目环境搭建成功

Vue.js2.X + ElementUI开发环境搭建

四、安装element-ui

npm i element-ui -S

#也可以直接指定elemengt-ui的版本

$ npm i element-ui@1.3.92

五、在main.js引入element-ui

import Element from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Element)

六、创建项目目录,开发自己的项目页面

Vue.js2.X + ElementUI开发环境搭建

原文
:https://blog.csdn.net/u012562943/article/details/71750921