vue2.* (多页面跳转)

@[vue2.3.3|webpack2.6.1|less|axios]

  • 之前看过有相关朋友share了空的多页面脚手架. 不过down了几个都是webpack1.0或者vue1.0的.

  • 刚好项目需要用到vue. 就在vue-cli的基础上进行了修改

  • 已经有babel直接用es6即可,如果需要修改配置的请到 .babelrc里面修改

  • 并且全局引了JQ(如果不需要或者不喜欢 请到base.conf.js里面修改)

  • 多页面空脚手架链接 如果需要路由版的在github的另外一个文件夹里


命令

国际惯例

  • npm install (or cnpm 其他) 装依赖包

  • npm run dev 起服务

  • npm run build 打上线包

  • 跑起来服务后,需要在url输入才可显示具体页面 /module/*.html (*为对应文件夹名字)

  • 添加了新文件夹后,需要重新 npm run dev一下


目录结构

1.build/config: 一系列配置文件
2.src: 页面文件
3.(src)assets:

  • js公用的方法/配置方法

  • less公用的样式和reset.css

  • lib.js页面引用的入口

4.(src)components: 复用的组件
5.(src)module: 相关的页面 (每个文件夹表示一个页面)

  • app.vue (页面)

  • *.html (页面的入口,需要和文件夹名称一致)

  • *.js (页面的js入口,需要和文件夹名称一致)

  • 在static文件夹中的tpl有模板直接复制就ok


其他

设置了webpack启动进行跳转

  • 在build/dev-server.js中可以进行配置(默认的为localhost:端口号)

// var uri = 'http://localhost:' + port
// 修改启动后的跳转的地址
var uri = 'http://localhost:' + port + '/module/template.html'

模板中的app.vue引入了公用的样式,配置和方法

import Lib from 'assets/lib.js';
  • 在assets/conf.js中配置了axios请求拦截.已经全局引入axios(使用this.$axios进行请求)
    有需要的话.具体的配置请到conf.js中进行增加

import Vue from 'vue';
import axios from 'axios'; //拦截方法
... Vue.prototype.$axios = axios;
  • 在assets/common.js中配置了一些公用的方法.有需要增加的请自行添加

引用路径的别称

  • 开发过程中需要import各种东西,为了减少写的路径地址.在build/webpack.base.conf.js中的alias进行了一系列的配置

  • new webpack.ProvidePlugin 这一部分是给项目全局引入的内容

端口号

  • 端口号在config/index.js中修改;

开发过程中的代理

  • 请到config文件夹中的 index.js中 proxyTable进行修改
    具体请参考此 github链接

/*
param:
*: 表示挂代理时,识别的请求前缀
url: 表示代理的地址
*/
'/*': {
target: 'url',
changeOrigin: true,
pathRewrite: {
'^/*': '/*'
}
}

本人也还正在学习中,刚好想着搭一个空的架子以备日后使用.其中有部分vue-cli生成的语句暂时还不太明白,希望能帮到有需要的或者不给大家挖坑.互相学习


0723模板修改

style标签中 区分独立样式的标识打错了.导致组件的样式互相影响了 - -

//<style lang="less" scope> (scope打错了)
<style lang="less" scoped>

通过js引入的样式文件进行拆分(为了更好使用mixin方法)

lib.js
//不通过js直接引入
//引入全局样式
// import 'assets/less/reset.css';
// import 'assets/less/common.less'; 1. reset.css(重置的css)
在页面统一入口的 *.js 引入 2.common.less(公用的样式和mixin方法)
在每个 *.vue 的style中 引入
//@import '~assets/less/common.less';
(~前缀在style的引入路径 配合alias使用)

基于vue-cli搭了一个多页面应用的空脚手架的更多相关文章

  1. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  2. 在vue项目中添加一个html页面,开启本地服务器

    在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

  3. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  4. 12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  5. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  6. 基于Vue cli生成的Vue项目的webpack4升级

    前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除 ...

  7. 基于vue框架手写一个notify插件,实现通知功能

    简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需 ...

  8. 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

    介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...

  9. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

随机推荐

  1. Python:os

    1.os.walk 学习自:python中os.walk的用法详解 - 马里亚纳仰望星空 - 博客园 说明 遍历某个文件夹下的所有文件(包括子文件夹中) 用法 os.walk( top , topdo ...

  2. 基于Kubernetes/K8S构建Jenkins持续集成平台(上)-2

    基于Kubernetes/K8S构建Jenkins持续集成平台(上)-2 Kubernetes实现Master-Slave分布式构建方案 传统Jenkins的Master-Slave方案的缺陷 Mas ...

  3. 如何建立自己的代理IP池,减少爬虫被封的几率

    如何建立自己的代理IP池,减少爬虫被封的几率 在爬虫过程中,难免会遇到各种各样的反爬虫,运气不好,还会被对方网站给封了自己的IP,就访问不了对方的网站,爬虫也就凉凉. 代理参数-proxies 首先我 ...

  4. JAVA ArrayList集合底层源码分析

    目录 ArrayList集合 一.ArrayList的注意事项 二. ArrayList 的底层操作机制源码分析(重点,难点.) 1.JDK8.0 2.JDK11.0 ArrayList集合 一.Ar ...

  5. Chapter08 面向对象(中级)

    Chapter08 面向对象(中级) 8.1 IDEA的使用 1. 快捷键 删除当前行, 默认是 ctrl + Y 自己配置 ctrl + d 复制当前行, 自己配置 ctrl + alt + 向下光 ...

  6. Sqlserver 2008 导出数据库

    sqlserver2008中导出数据库: ①当数据库中的数据量比较大时,可使用备份的方法. 路径可以默认,想自定义就点击[添加],最后[确定]即可. ②当数据量不是很大时,可以采用导出SQL执行语句的 ...

  7. php 23种设计模型 - 策略模式

    介绍 意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换,用户还不需要知道其具体的实现 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使 ...

  8. Clickhouse 与 Kafka 的数据同步

    作者: LemonNan 原文地址: https://mp.weixin.qq.com/s/SUUHF9R_FKg-3vq7Q3cwBQ 注: 转载需注明作者及原文地址 介绍 Clickhouse 本 ...

  9. IDEA快捷键使用分享

    Ctrl+D:复制当前行 Shift+Enter:光标移动到下一行 Alt+/:补全代码 Alt+Enter:万能解错/生成返回值变量 Ctrl+Z:撤销 Ctrl+y:反撤销 Ctrl+y:删除 C ...

  10. 关于linux命令的随笔第一篇

    大多数的情况下,我们都是通过ssh客户端远程连接服务器去进行维护访问,所以我们必须要掌握linux命令 linux命令大约有上百种,但是并非所有命令都属于常用命令,所以不需要死记硬背,多用多百度就可以 ...