github上项目地址:https://github.com/comonly/javaweb_blog/tree/master/blog_diverse_frontend

具体搭建流程及实现方式:http://comonly.cn/p/1129.html

项目内容

1. 项目通过:vue init webpack project-name 自动构建。
2. 使用 axios 异步请求数据。
3. 样式使用 ElementUI。

实现流程

  1. 利用vue-cli来搭建vue项目——通过npm创建一个vue项目:http://comonly.cn/p/1030.html
  2. src目录main.js文件中配置需要用到的工具。
  3. 同时要在 package.json 文件中添加需要的 模块 。
  4. 接着在src/components目录下创建组件。
  5. 然后在src/router目录下添加路由。

vue项目搭建通过vue-cli包括组件路由的使用实现基本的前端项目全流程的更多相关文章

  1. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

  2. ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

    一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...

  3. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  4. 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建

    从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...

  5. 从零开始搭建框架SSM+Redis+Mysql(二)之MAVEN项目搭建

    从零开始搭建框架SSM+Redis+Mysql(二)之MAVEN项目搭建 废话不说,直接撸步骤!!! 1.创建主项目:ncc-parent 选择maven创建项目,注意在创建项目中,packing选择 ...

  6. 004-Spring boot 快速入门-项目搭建与启动、SpringBootApplication、启动图标

    一.官方地址 Spring:http://spring.io/ Spring Project:http://spring.io/projects Spring boot:https://project ...

  7. VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  8. Vue框架(三)——Vue项目搭建和项目目录介绍、组件、路由

    Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...

  9. Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用

    vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...

随机推荐

  1. 小程序 image跟view标签上下会有间隙

    图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距 我是使用: 加上这个消除了间隙,如果没有解决,你可以分别用 vertical-align:t ...

  2. Linux用户组

    1.介绍 类似于角色,系统可以对有共性的多个用户进行统一的管理 2.增加组 groupadd  组名 3.删除组 groupdel  组名 4.增加用户时直接为用户指定组 useradd  -g  用 ...

  3. IdentityServer4入门三:授权模式

    在入门一.入门二我们实现了一个完整的API保护的过程.需要保护的API只需在其Controler上应用[Authorize]特性,来显式指定受保护的资源.而我们实现的这个例子,所应用的模式叫“Clie ...

  4. 转录调控 | Transcriptional Regulation | Regulon

    scRNA-seq做完该做的QC.normalization.imputation.clustering.trajectory和integration,就会开始做转录调控的分析了. 核心就是围绕着TF ...

  5. Keil MDK 5代码补全功能设置

    这段时间在用Keil5编程,经常会遇到在程序文件头部定义一个全局变量.在后面的编程过程中,经常会要用到这个变量,如果每次再打这个变量名会特别麻烦和浪费时间,我就想着Keil5有没有像vs软件一样的代码 ...

  6. keras 在train_on_batch中启用tensorboard

    def write_log(callback, names, logs, batch_no): for name, value in zip(names, logs): summary = tf.Su ...

  7. SVG-变换

    transform变换 translate平移 <svg width="200" height="50"> <rect x="0&q ...

  8. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_08-SpringSecurityOauth2研究-解决swagger-ui无法访问

    3.3.4.4 解决swagger-ui无法访问 当课程管理加了授权之后再访问swagger-ui则报错: 这里默认配置的了所有的请求都必须认证 把图片认证的路径加进去的话 那么访问课程图片的列表 就 ...

  9. linux下将文件上传到svn服务器

    linux下将文件上传到svn服务器 摘自:https://blog.csdn.net/sky_yangge/article/details/41544773 2014年11月27日 16:47:57 ...

  10. Linux/CentOS下修改MAC地址

    Linux/CentOS下修改MAC地址 摘自:https://blog.csdn.net/qq_33233768/article/details/64906265 2017年03月22日 11:06 ...