使用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 ...
随机推荐
- async处理异步操作
async函数用async作为关键字,try和 catch来处理异常, await接受一个promise函数返回 async list () { try { await api.findjuBarDa ...
- gitlab相关命令操作
[root@xuegod63 ~]# git config --global user.name "zsl3"[root@xuegod63 ~]# git config --glo ...
- vue element 表单多个验证时,滚动到验证提示的位置
最近项目有个下单的过程,需要输入很多信息,每次提交都要往下滑,还要去验证,测试后发现体验也不好,element框架也没提供这种滚动方法, 不过提供了一个验证的方法 validate (两个参数:是否校 ...
- bootstrap帮助文档
概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属 ...
- 4 Action的3种编写方式,pojo,实现和继承(推荐)
Action的访问: 1 Action类是pojo(Plain Ordinary Java Object):简单Java对象,无接口,无继承.例如上篇文章中只创建了public String exec ...
- Servlet+Spring+Mybatis初试
1.导入相关的jar包 druid mybatis mybatis-spring pageHelper mysql驱动包 spring-context-support spring-aspect sp ...
- HDU1029 简单DP
"OK, you are not too bad, em... But you can never pass the next test." feng5166 says. &quo ...
- LeetCode 141. Linked List Cycle(判断链表是否有环)
题意:判断链表是否有环. 分析:快慢指针. /** * Definition for singly-linked list. * struct ListNode { * int val; * List ...
- XModem与YModem
XModem用在串口异步传文件: #define SOH 0x01 #define STX 0x02 #define EOT 0x04 #define ACK 0x06 #define NAK 0x1 ...
- 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- ...