Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)

传送门：Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)

本文对环境准备，项目搭建，服务启用及停止等进行介绍。

---

目录

一、了解

二、环境准备

2.1 安装node +  npm

2.2 安装IDE

三、初始项目搭建（使用element-starter）

3.1 项目下载

3.2 项目启动

3.3 停止项目及错误关闭项目端口被占用时解决方案

四、了解vue目录结构

---

 

一、了解

Vue: 渐进式JavaScript 框架

官网：https://cn.vuejs.org/

 

Element 网站快速成型工具：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网： https://element.eleme.cn/#/zh-CN

 

二、环境准备

2.1 安装node +  npm

安装node会自动安装npm。

安装node：https://nodejs.org/en/ 官网点击下载

 

查看安装结果，查看版本

➜  element-starter git:(master) ✗ which node
/usr/local/bin/node
➜  element-starter git:(master) ✗ node -v
v12.16.1
➜  element-starter git:(master) ✗ which npm
/usr/local/bin/npm
➜  element-starter git:(master) ✗ npm -v
6.13.4

2.2 安装IDE

webstorm(vue) pycharm(python)

这里使用的pycharm，并安装vue.js(安装方法可参考 https://www.cnblogs.com/lyfstorm/p/12372746.html )

 

三、初始项目搭建（使用element-starter）

这里使用elementui官网的starter项目模板

3.1 项目下载

项目直达下载： https://github.com/ElementUI/element-starter

或者elementui官网进入项目并下载：

 

3.2 项目启动

在本地项目目录下执行如下命令 将npm模块安装到这个目录下（安装依赖包，生成node_modules目录）

npm install 或者
npm install --registry=http://registry.npm.taobao.org

在本地项目目录下执行如下命令 将工程打包运行

npm run dev

 

另：如果需要安装依赖包

npm install vue-router --save

3.3 停止项目及错误关闭项目端口被占用时解决方案

1）停止项目：启动项目的终端页面中执行Ctrl+c来停止服务器

2）如果未正确停止项目，导致接口被占用无法从新启动项目

可查找端口被占用的进程

lsof -i:8000（注：-i:后的端口名根据自己的修改）

然后kill -9 PID强制结束。

 

四、了解vue目录结构

详见 Vue.js 目录结构 ，使用import从./components导入组件的方法也可参考此链接。

 

传送门：Vue+elementUI从头开始构建前端页面(前篇-Starter搭建)

传送门：Vue+elementUI从头开始构建前端页面(中篇-Table作妖)

传送门：Vue+elementUI从头开始构建前端页面(后篇-NavigationMenu路由)