vue.js + element-ui + webpack项目搭建

一、安装node.js

node.js是运行在服务端的JavaScript,集成了npm(node package manage),官网下载最新版本进行安装 http://nodejs.cn/download/(以下截图为v8.1.3);

使用 $ npm -v 命令查看有没有安装npm。

vue.js + element-ui + webpack项目搭建

使用  $ node -v  命令查看node版本。

vue.js + element-ui + webpack项目搭建

二、安装webpack

通过npm安装webpack,打开命令行工具安装

$ npm install webpack -g

vue.js + element-ui + webpack项目搭建

三、安装vue-cli

vue-cli搭建vue.js开发环境,打开命令行工具安装

$ npm install vue-cli -g

四、安装完创建项目

找一个目录创建和初始化项目

$ vue init <template-name> <project-name>

vue.js + element-ui + webpack项目搭建

生成的文件目录结构:

vue.js + element-ui + webpack项目搭建

五、运行项目

根据初始化成功提示操作

vue.js + element-ui + webpack项目搭建

进入项目目录,执行 $ npm run dev 

vue.js + element-ui + webpack项目搭建

运行成功,访问界面如下:

vue.js + element-ui + webpack项目搭建