前端项目的开发

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. async处理异步操作

    async函数用async作为关键字,try和 catch来处理异常, await接受一个promise函数返回 async list () { try { await api.findjuBarDa ...

  2. gitlab相关命令操作

    [root@xuegod63 ~]# git config --global user.name "zsl3"[root@xuegod63 ~]# git config --glo ...

  3. vue element 表单多个验证时,滚动到验证提示的位置

    最近项目有个下单的过程,需要输入很多信息,每次提交都要往下滑,还要去验证,测试后发现体验也不好,element框架也没提供这种滚动方法, 不过提供了一个验证的方法 validate (两个参数:是否校 ...

  4. bootstrap帮助文档

    概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属 ...

  5. 4 Action的3种编写方式,pojo,实现和继承(推荐)

    Action的访问: 1 Action类是pojo(Plain Ordinary Java Object):简单Java对象,无接口,无继承.例如上篇文章中只创建了public String exec ...

  6. Servlet+Spring+Mybatis初试

    1.导入相关的jar包 druid mybatis mybatis-spring pageHelper mysql驱动包 spring-context-support spring-aspect sp ...

  7. HDU1029 简单DP

    "OK, you are not too bad, em... But you can never pass the next test." feng5166 says. &quo ...

  8. LeetCode 141. Linked List Cycle(判断链表是否有环)

    题意:判断链表是否有环. 分析:快慢指针. /** * Definition for singly-linked list. * struct ListNode { * int val; * List ...

  9. XModem与YModem

    XModem用在串口异步传文件: #define SOH 0x01 #define STX 0x02 #define EOT 0x04 #define ACK 0x06 #define NAK 0x1 ...

  10. error C4430: missing type specifier - int assumed. Note: C++ does not support default-int 解决方法

    在VS2012中生成时出错:error C4430: missing type specifier - int assumed. Note: C++ does not support default- ...