Coder Social home page Coder Social logo

bluefox1688 / vue-cli-multi-page Goto Github PK

View Code? Open in Web Editor NEW
829.0 829.0 240.0 872 KB

因时间精力有限,项目已不再维护,请慎重使用,vue2-cli-vux2-multe-page,使用了webpack2+vuejs2+vuxUI2的多页面脚手架

JavaScript 29.20% HTML 3.03% CSS 5.55% Vue 62.22%

vue-cli-multi-page's Introduction

因时间精力有限,项目已不再维护,请慎重使用

使用前注意事项

1、直接使用 cnpm可能会导致依赖不正确。强烈建议给 npm 设置 taobao 的 registry。

npm install --registry=https://registry.npm.taobao.org

2、如果你遇到 $t 报错问题,先删除 node_modules文件夹后再重装依赖。

3、新建页面,需重新npm run dev才可以正常访问新建的页面。

4、npm run dev将会自动在浏览器打开页面,如未正常打开,请访问完整的路径http:// localhost:8091/views/home/list.html

前言

vue2.0上线已经有一段时间了,现在vue2.1也都已经发布了,是时候来更新基于vue的多页面脚手架了。

相信用vue的童鞋,很多一部分在用于spa(单页面)项目,也不排除传统的多页面项目,我们就用vue开发了多页面的webapp,相对于spa开发效率更高,使用单页面或者多页面,最终还是看项目的需求啦。

这一次我们基于vuejs2+webpack2+vuxui2(好222的项目)重新发布了全新的vue脚手架,同时还支持二级目录,以解决页面比较多时,便于归类查找的问题。基于webpack2,构建速度高。ajax获取数据,使用axios,当然还有其他的优化,咱们先看看demo呗。

demo地址: http://v.lanchenglv.com/demo/vue2-cli-vux2-multe-page/views/home/list.html

github地址: https://github.com/bluefox1688/vue-cli-multi-page

** 此版仅支持vu2.0,如果需要vue1.0多页面脚手架,请访问分支 ** https://github.com/bluefox1688/vue-cli-multi-page/tree/master

2.0的主要功能

  1. 全局统一使用的模块Lib.js
  2. 支持字体图标
  3. 构建时,增加对css打包的支持
  4. 提取公共模块
  5. 多页面可使用vue-router2路由
  6. 可自定义页面模块名,例如 http:// localhost:8091/views/home/list.html,views就是我们线上的模块名,1.0版只能固定的
  7. 支持二级目录,便于归类,1.0版本暂时仅支持一级目录
  8. 模块下静态文件可直接调用
  9. 发送ajax请求,使用axios库,简单封装了一个库,为了减少学习成本,封装参数基本与JQ ajax一致,如果不需要可直接删除
  10. 整合了vue最流行的UI框架,vuxui2.xgithub star 已接近8K了,组件非常全面,并且作者一直有维护,从0.x版本我就开始有使用了,具体了解更多,请访问官网 https://vux.li
  11. 基于webpack2,更高的构建速度,包体积更小,全面支持ES6 Modules
  12. 热更新,效率提升神器呀
  13. 支持Lesscss预处理
  14. 获取多页面的url参数的方法
  15. 全局注册vue全局过滤器的方法

Build Setup

clone到本地仓之后,自行npm **,都是老司机了,这里也不重复了。

# 安装依赖
npm install

# 调试环境 serve with hot reload at localhost:8091
npm run dev

# 生产环境 build for production with minification
npm run build

本地默认访问端口为8091,需要更改的童鞋请到项目目录文件config/index.js修改。

目录结构

webpack
 |---build
 |---src
     |---assets    #资源
     |---css/common.css  #css
     |---font/    #字体图标
     |---js/common.js    #自己定义的全局通用事件
     |---js/conf.js    #项目的配置
     |---js/Lib.js    #暴露接口给组件调用
     |---js/vueFilter.js    #注册vue的全局过滤器	
 |---components 组件
     |---Button.vue  按钮组件
     |---hb-head.vue  head组件
|---views    #各个页面模块,模块名可以自定义哦!
     |---home    #一级目录
        |---list    #二级目录
             |---list.html
             |---list.js
             |---listApp.vue
     |---vuxDemo    #一级目录
        |---button    #二级目录
             |---button.html
             |---button.js
             |---buttonApp.vue	
        |---calendar    #二级目录
             |---calendar.html
             |---calendar.js
             |---calendarApp.vue		 
......
     

此次2.0版本也优化也可以自定义模块的名称,1.0版时,无法自定义模块名。

例如 http:// localhost:8091/views/home/list.html,views就是我们线上的模块名,如需修改请到项目目录文件config/index.js修改moduleName参数,修改这里的配置的同时,也要同时重命名/src/views的这个文件夹名称,是否会报错的。

从目录结构上,各种组件、页面模块、资源等都按类新建了文件夹,方便我们储存文件。其实我们所有的文件,最主要都是放在views文件夹里,以文件夹名为html的名称。 例如

|---vuxDemo    一级目录
 |---button    二级目录
   |---button.html
   |---button.js
   |---buttonApp.vue	

就是我们访问时的地址:

http://localhost:8091/views/vuxDemo/button.html

view里二级文件夹,一个文件夹就是一个html,js``vue``html 都统一放在当前文件夹里,当然你也可以继续放其他的资源,例如css、图片等,webpack会打包到当前模块里。

还有一点要注意的,所有的目录都要求为二级,不能一个目录下为一级,另一个目录下有二级。

Lib.js库使用

我们做多页面开发,那肯定会涉及到全局都能调用的公共库,或者是把别人封装的库也一起打包在全局公共模块里。

如果看过源码的童鞋,在*.vue页面里,都统一import了一个文件

import Lib from 'assets/js/Lib';

这就是全局统一公共模块,我们先看看Lib.js里的代码

# 导入全局的css
require('assets/css/common.css');
# 导入全局的站点配置文件
import C from './conf';
# 导入全局的共用事件
import M from './common';

export default{
	M,C
}

Lib.jsMC都是事件调用简写。例如我们现在想调用APP的名称,在.vue里可以这么写

import Lib from 'assets/js/Lib';
Lib.C.appname;  #蓝橙绿

只需要在*.vue里导入import Lib from 'assets/js/Lib';',就可以使用全局模块了。 当然你还可以在Lib做一些程序判断,例如权限判断等。

公共模块

我们通常会把常用的库都打包成公共模块,CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口 chunk 的公共模块。最终合成的文件能够在最开始的时候加载一次,便存起来到缓存中供后续使用。这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。

不同的项目,使用到的插件库数量有所不同,我们可以调整minChunks以达到公共模块的大小,文件路径为/build/webpack.prod.conf.js,cart+F查找minChunks参数,minChunks: 4 意思代表为至少被4个页面引用了,就打包进入公共模块,具体的使用方法,可以再详细了解webpack中文文档。http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/

存在的问题

1、多页面可以使用vue-router路由,但是无法使用按需加载,即懒加载,研究过在多页面的路由里按需加载,但从未成功,如果有童鞋研究成功了,可以发lssues一起交流哈。

2、暂时还没有做css自动补前缀

3、......

结束言

此vue多页面脚手架,并不局限于vux ui 框架,但现在的UI框架都要自己对webpack简单配置下。

生命在于折腾,理想还是要有的,万一实现了呢。

有问题随时Issues哈!

文章首发地址:

http://lanchenglv.com/article/2017/0409/vue2-webpack2-cli-vux2-multe-page.html

vue-cli-multi-page's People

Contributors

bluefox1688 avatar xinhualufang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-cli-multi-page's Issues

dev模式下异常,生产模式下正常

想在dev模式把css提取出来,于是
{ test : /\.css$/, // loader : 'style-loader!css-loader' loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }
发现报错。
于是把webpack.base.conf中的
vue:{loader: cssLoaders({ extract: true })}
即可。

否则会报错:webpack/webpack#959

已解决。

打包后vender每次打包内容都会变化

比如第一次:
var K=n(109),G=n(154),Z=n(155);e.Buffer=i,e.SlowBuffer=v,e.INSPECT_MAX_BYTES=50,i.TYPE...

第二次或者隔一段时间就变成:

var K=n(114),G=n(159),Z=n(155);e.Buffer=i,e.SlowBuffer=v,e.INSPECT_MAX_BYTES=50,i.TYPE...

然后,每个页面的独立JS 文件也会跟着vender变化;

但我并没有修改公用组件啊,这样的化 我每隔几天 如果有新的项目,那就要把之前写的页面,js统统重新上传一遍,有没有什么解决办法呢

如何在多页面中实现单元测试

公司需要为每一个模块写单元测试,但是不知道应该怎么配置,您有时间可不可以考虑更新一版有单元测试的配置呢

提取公共head

views里面的每一个模块其实html页面都是一样的,不知道能不能做个提取,定一个layout用于每一webpack构建是调用

请问怎么关闭严格模式

我引入import mui from 'assets/lib/mui/mui.min.js';
报错Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

网上说是严格模式,网上给的方法没能解决
请问这个怎么处理啊

js,vue 两文件同名的问题

在页面模块目录下,js,vue文件最好不要同名,因为容易import js本身
以login为例:
import App from './login'
我们import时,一般省略掉.vue后缀,这样的代码就会出错
所以一定要同名的话,要写成这样
import App from './login.vue'

另外 vue 新的写法

new Vue({
       el: '#app',
       template: '<App />',
       components: { App }
})

缺一不可.要不然也render不出来

控制台显示 ERR_INCOMPLETE_CHUNKED_ENCODING 错误

系统:windows7
node:8.1.0
下载源码npm install后
打开页面console里提示 net::ERR_INCOMPLETE_CHUNKED_ENCODING

(unknown) You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
:8091/__webpack_hmr Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING
backend.js:1 [vue-devtools] Ready. Detected Vue v2.3.4

求解决思路

多页面使用vue-router问题

我按照github上的源码使用了一下vue-router 但是我的加载不出来 也不报错 一片空白 路由也能切换 好郁闷

一级目录下直接创建页面打包问题

一级目录下直接创建文件打包生成的html文件中 引用的资源文件路径 "../../" 导致无法正确定位到资源文件,目前的做法是手动修改去掉一个"../", 请问这种情况如何通过打包工具处理?谢谢。

输出css/js文件到指定路径下

你好,因为要匹配后端的资源目录的路径,所以打包生成后的css/js之类的文件需要全部输出到一个
app/assests/目录下面,请问怎样配置才能实现呢?

外联引入script

您好我想通过外联script标签方式引入公共第三方库,请问该怎么办

windows 下图片路径问题

windows下面 css 引用的路径 没有转换还是 ''
return path.posix.join(assetsSubDirectory, _path)

修改这句

可以不可搞个默认页面

在编译或开发时候自动把新增模块的超链接自动加到默认页面,这样就不用调的时候,切来切去的了

cnpm i安装有一个失败,npm run dev 运行报错

安装错误:[Error: Run "C:\windows\system32\cmd.exe /d /s /c node-pre-gyp install --fallbac
k-to-build" error, exit code 1

在安装包一个错误下运行报错:webpack.base.conf.js文件 let。。
吧let改成var就可以跑起来了,
但页面跑起来后TypeError: t.$t is not a function 页面总是抱着个错误

解决了我cli多页面2级页面的的需求,找了好久,谢谢楼主

图片引用和打包问题

在view里二级文件夹,一个文件夹就是一个html,jsvuehtml 都统一放在当前文件夹里,当然你也可以继续放其他的资源,例如css、图片等,webpack会打包到当前模块里。

我在jsvuehtml同级目录存放了图片并使用相对路径引用,图片存在且名字无误,但是会404,有什么办法解决么?

如何获取路径参数?

  • 现在demo获取参数如下:
    /views/tools/getQuery.html?goodsid=1688&shopid=25

  • 能不能把 *.html 去掉,访问:
    /views/tools/getQuery?goodsid=1688&shopid=25

这样需要怎么配置路由呢,烦大神赐教?

logo

想问下首页那个logo图片是哪里来的呢,没找到路径。谢谢

请教一下:关于 vue-router

1

在依赖中看到了 vue-router ,但是在代码中却没有看到,貌似是不同的 html 加载不同的 css js。在 webpack 入口是根据 views 文件夹多入口打包。想请教一下 vue-router 在哪里配置使用的。

2

顺便还问一下, 没发现在哪里 new Vue() 实例, 也请解惑下哈。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.