前端项目的开发

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. 【代码总结】PHP文件的上传和下载

    ===================== 文件上传和下载 ===================== 一.php.ini的配置信息 file_uploads = On /Off    是否允许文件上 ...

  2. selenium webdriver 截屏

    /**截图 * @param driver * @param name */ public static void takeScreenShot(WebDriver driver,String nam ...

  3. 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

    HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...

  4. JavaScript学习笔记----- 继承的实现及其原理

    按照自己在极客上学习的顺序整理了一下,参考了几位前辈的随笔,十分感谢:                       参见http://blog.yemou.net/article/query/info ...

  5. C++ STL之动态数组vector(⽮量)的使⽤

    写再最前面:摘录于柳神的笔记:   之前C语⾔⾥⾯⽤ int arr[] 定义数组,它的缺点是数组的⻓度不能随⼼所欲的改变,⽽C++⾥⾯有⼀个能完全替代数组的动态数组 vector (有的书⾥⾯把它翻 ...

  6. 「ZJOI2007」捉迷藏

    题目描述 给出一棵\(N\)个有色(黑白,黑色对应关灯,白色对应开灯)节点的树以及\(M\)次操作,每次操作将改变一个节点的颜色或者求出树上最远的两个白点距离 基本思路 \(60pts\)做法 这道题 ...

  7. [PHP] PHP7已经删除了preg_replace的e修饰符

    官网提示是这样的,对/e修饰符的支持已删除.请改用preg_replace_callback()原因是/e 修正符使 preg_replace() 将 replacement 参数当作 PHP 代码( ...

  8. 十八 Spring的JDBC模板:引入外部属性文件

    配置外部属性文件 配置文件里引入属性文件,两种方式 第一种: 第二种: 引入属性文件的值: 测试: <?xml version="1.0" encoding="UT ...

  9. 吴裕雄--天生自然HADOOP学习笔记:Shell工具使用

    实验目的 学习使用xshell工具连接Linux服务器 在连上的服务器中进入用户目录 熟悉简单的文件操作命令 实验原理 熟悉shell命令是熟悉使用linux环境进行开发的第一步,我们在linux的交 ...

  10. C. Magic Grid 构造矩阵

    C. Magic Grid time limit per test 1 second memory limit per test 256 megabytes input standard input ...