前端项目的开发

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. iOS开发架构学习记录

    闲着没事看了一些iOS开发架构的视频,简单的介绍了几个常用的架构设计,现将它记录如下,以后有时间再专门写这方面的内容,大家可以看看,感兴趣的就进一步学习. 一.架构基础 1.架构设计的目的 进一步解耦 ...

  2. 六 Struts2访问Servlet的API方式一:完全解耦合的方式

    注意: 完全解耦合的方式,这种方式只能获得代表request.session.application的数据的Map集合. 不能操作这些对象的本身的方法. 1 jsp: <%@ page lang ...

  3. 【转】spring IOC和AOP的理解

    spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...

  4. MySql向SQLServer迁移常见问题

    -- MySql与SQLServer update inner join语法区别-- MySql: UPDATE A LEFT JOIN B ON A.B_ID = B.B_ID SET A.A_NA ...

  5. Python数据类型-6 字典

    字典 Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度.但它是无序的,包含的元素个数不限, ...

  6. 02-05Android学习进度报告五

    今天主要学习了关于Android 开发的关于进度条和拖动条的知识. 主要学习了一些关于进度条的基本属性: android:max:进度条的最大值 android:progress:进度条已完成进度值 ...

  7. vue-element-admin 引入高德地图并做海量点标记

    第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...

  8. Android开发实例之miniTwitter登录界面的实现

    原文: http://www.jizhuomi.com/android/example/134.html 本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界 ...

  9. windows 创建软连接

    mklink /d D:\www\child.ivyoffline\common\components\policy D:\www\child.ivyoffline\appOA\protected\c ...

  10. 生成资源文件时候,可以动态替换为maven属性

    1.maven管理的文件或者是maven插件处理的文件中   可以引用maven属性,在编译输出时候,可以替换   ${project.build.testOutputDirectory}   在资源 ...