前端项目的开发

1. 本地安装nodejs https://nodejs.org/en/download/
2. 测试安装
> node -v

3. 本地安装git
> git --version

4. 使用vue-element-admin
https://panjiachen.github.io/vue-element-admin-site/zh/guide

1) 进入项目中(使用的IDE软件为 Visual Studio Code)
> cd vue-element-admin
2)安装依赖(npm install 或 cnpm install)
> npm install (安装依赖) 不做,慢!
为了加快下载速度,先安装cnpm
> npm install -g cnpm --registry=https://registry.npm.taobao.org
> cnpm install
3) 运行项目
> npm run dev

5. 路由重置
src/router/index.js

6. 页面添加
src/pages
1) 编写页面
2) 配置路由

熟练后的步骤:

1. 使用VS Code打开工作空间中的某一文件夹

2.打开Terminal终端,运行以下命令,--depth 1 代表最近一次commit的版本,这样下载速度比较快。

git clone https://github.com/PanJiaChen/vue-element-admin.git --depth 1

3. 运行 cd vue-element-admin-site 命令,进入项目

4. 使用淘宝镜像,运行命令: npm install -g cnpm --registry=https://registry.npm.taobao.org 

5. 安装依赖,运行命令: cnpm install 

6. 运行项目,运行命令:npm run dev

大功告成!

使用vue框架开发前端项目的步骤的更多相关文章

  1. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  2. SSM框架开发web项目系列(二) MyBatis真正的力量

    前言 上篇SSM框架环境搭建篇,演示了我们进行web开发必不可少的一些配置和准备工作,如果这方面还有疑问的地方,可以先参考上一篇“SSM框架开发web项目系列(一) 环境搭建篇”.本文主要介绍MyBa ...

  3. SSM框架开发web项目系列(五) Spring集成MyBatis

    前言 在前面的MyBatis部分内容中,我们已经可以独立的基于MyBatis构建一个数据库访问层应用,但是在实际的项目开发中,我们的程序不会这么简单,层次也更加复杂,除了这里说到的持久层,还有业务逻辑 ...

  4. 每天一点点之vue框架开发 - 使用vue-router路由

    1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...

  5. YII框架开发一个项目的通用目录结构

    YII框架开发一个项目的通用目录结构: 3 testdrive/ 4 index.php Web 应用入口脚本文件 5 assets/ 包含公开的资源文件 6 css/ 包含 CSS 文件 7 ima ...

  6. SSM框架开发web项目系列(三) MyBatis之resultMap及关联映射

    前言 在上篇MyBatis基础篇中我们独立使用MyBatis构建了一个简单的数据库访问程序,可以实现单表的基本增删改查等操作,通过该实例我们可以初步了解MyBatis操作数据库需要的一些组成部分(配置 ...

  7. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  8. Vue实例:vue2.0+ElementUI框架开发pc项目

    开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

随机推荐

  1. scrapy 和 scrapy-redis

    1.scrapy 是一个 Python 爬虫框架,爬取效率极高,但是不支持分布式.而 scrapy-redis 时一套基于 redis 数据库.运行在 scrapy 框架之上的组件,可以让 scrap ...

  2. python 连接oracle基础环境配置方法

    配置基础: 1.python3.7 2.oracle server 11g 64位 3.PLSQL 64位 4.instantclient-basic-windows.x64-11.2.0.4.0这个 ...

  3. 在IDEA中为SpringBoot配置热部署

    版本:IDEA Community 2019.2.2,Spring Boot  2.1.8.RELEASE 流程:pom文件中添加依赖: <dependency> <groupId& ...

  4. js运动框架及应用

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 如何申请自己的Flag Counter?

    申请自己的Flag Counter是一件简单的事. 首先,进入Flag Counter主页. 之后,选择好样式,点击"GET YOUR FLAG COUNTER".会弹出一个对话窗 ...

  6. 如何让浏览器的左上角显示自己的logo的小诀窍

    很简单,只需要在head头部加上以下代码 <link rel="icon" href="图片路径" type="image/x-icon&quo ...

  7. Spring事务原理分析-部分二

    Spring事务原理分析-部分二 说明:这是我在蚂蚁课堂学习了余老师Spring手写框架的课程的一些笔记,部分代码代码会用到余老师的课件代码.这不是广告,是我听了之后觉得很好. 课堂链接:Spring ...

  8. 【拒绝挂分】盘点蒟蒻ghy的各种sb错误

    1.m与n打反(打错) NOIPd2t2 50变15爽不爽啊.jpg 某次信心赛四道sb题里面最sb的一道 sort里面的m打成n 100变40爽不爽啊.jpg(还有40我真的谢谢您了 2.没开lon ...

  9. Java枚举类型enum使用详解

      java的Enum枚举类型终于在j2se1.5出现了.之前觉得它只不过是鸡肋而已,可有可无.毕竟这么多年来,没有它,大家不都过得很好吗?今日看<Thinking in Java>4th ...

  10. 神奇的URL Schemes大全

    微信: 打开微信 wechat:// 微信扫一扫 weixin://scanqrcode 支付宝: 蚂蚁庄园 alipays://platformapi/startapp?appId=66666674 ...