使用vue框架开发前端项目的步骤
前端项目的开发
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框架开发前端项目的步骤的更多相关文章
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- SSM框架开发web项目系列(二) MyBatis真正的力量
前言 上篇SSM框架环境搭建篇,演示了我们进行web开发必不可少的一些配置和准备工作,如果这方面还有疑问的地方,可以先参考上一篇“SSM框架开发web项目系列(一) 环境搭建篇”.本文主要介绍MyBa ...
- SSM框架开发web项目系列(五) Spring集成MyBatis
前言 在前面的MyBatis部分内容中,我们已经可以独立的基于MyBatis构建一个数据库访问层应用,但是在实际的项目开发中,我们的程序不会这么简单,层次也更加复杂,除了这里说到的持久层,还有业务逻辑 ...
- 每天一点点之vue框架开发 - 使用vue-router路由
1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...
- YII框架开发一个项目的通用目录结构
YII框架开发一个项目的通用目录结构: 3 testdrive/ 4 index.php Web 应用入口脚本文件 5 assets/ 包含公开的资源文件 6 css/ 包含 CSS 文件 7 ima ...
- SSM框架开发web项目系列(三) MyBatis之resultMap及关联映射
前言 在上篇MyBatis基础篇中我们独立使用MyBatis构建了一个简单的数据库访问程序,可以实现单表的基本增删改查等操作,通过该实例我们可以初步了解MyBatis操作数据库需要的一些组成部分(配置 ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- Vue实例:vue2.0+ElementUI框架开发pc项目
开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
随机推荐
- 20 个新的且值得关注的 Vue 开源项目
译者:前端小智作者:Nastassia Ovchinnikova来源:flatlogic.com 个人专栏 ES6 深入浅出已上线,深入ES6 ,通过案例学习掌握 ES6 中新特性一些使用技巧及原理, ...
- 5G时代,行业市场用户的公网与专网如何选择
导读 今年,5G开启了真刀真枪的商用元年,尤其中国5G正式启动商用服务,5G规模商用进程再次大提速.除了面向消费者领域,5G更大的商业价值还是寄望于进入各个垂直行业,赋能千行百业数字化转型. 5G进入 ...
- 第2节 Scala中面向对象编程:9、getClass和classOf;10、调用父类的constructor;11、抽象类和抽象字段;
6.3.4. Scala中getClass 和 classOf Class A extends class B B b=new A b.getClass ==classOf[A] B b ...
- JS如何阻止事件冒泡
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx. ...
- SystemVerilog for design 笔记(二)
转载请标明出处 1. System Verilog文本值和数据类型 1.1. 增强的文本值赋值 相对于verilog,SV在文本值赋值时可以1.无需指定进制 2.赋值可以是逻辑1 用法: reg ...
- Django 执行 manage 命令方式
本人使用的Pycharm作为开发工具,可以在顶部菜单栏的Tools->Run manage.py Task直接打开manager 命令控制台 打开后在底部会有命令窗口: 或者,也可以在Pytho ...
- Maven项目-Tomcat - 方法无法为jsp编译类ClassFormatException的解决
解决方法:
- mysql 获取刚插入行id汇总
mysql 获取刚插入行id汇总 我们在写数据库程序的时候,经常会需要获取某个表中的最大序号数, 一般情况下获取刚插入的数据的id,使用select max(id) from table 是可以的.但 ...
- redis之五大数据类型介绍
目录 redis五大数据类型 1. string(字符串) 特点: 格式: 基本操作: 2. hash(哈希) 特点: 格式: 基本操作 3. list(列表) 特点 格式 基本操作 4. set(集 ...
- Rabbitmq概念用法
MQ全称为Message Queue, 是一种分布式应用程序的的通信方法,它是消费-生产者模型的一个典型的代表,producer往消息队列中不断写入消息,而另一端consumer则可以读取或者订阅队列 ...