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

一、安装node.js

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

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


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


二、安装webpack

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

$ npm install webpack -g

vue.js + element-ui + webpack项目搭建_第1张图片

三、安装vue-cli

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

$ npm install vue-cli -g

四、安装完创建项目

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

$ vue init  

vue.js + element-ui + webpack项目搭建_第2张图片

生成的文件目录结构:

vue.js + element-ui + webpack项目搭建_第3张图片

五、运行项目

根据初始化成功提示操作

vue.js + element-ui + webpack项目搭建_第4张图片

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

vue.js + element-ui + webpack项目搭建_第5张图片

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

vue.js + element-ui + webpack项目搭建_第6张图片

你可能感兴趣的:(vue.js + element-ui + webpack项目搭建)