luchanan/vue2.0-multi-page

基于vue-cli(vue2.X，webpack1.X，es6，sass环境)多页面开发

Vue-cli(2.0) 多页面开发实战

由于之前主要使用jquery方式开发，现在想换一种方式，使用MVVM开发(感觉vue跟我之前用的angular1.X差不多类似)，所以在开发中会遇到很多问题，借此来记录一下；或者有很多不足，又或者里面可能存在些错误，anyway，请多多指教，共勉。

现在的开发环境

1. nodejs v5.1.1 ，npm 3.3.1.12
2. 使用vue-cli（包含vue2.0，webpack，sass，es6等环境）

如何运行项目

# 下载项目后，首先安装需要的包
npm install

# 开发运行环境;运行命令后，浏览器自动打开http://localhost:8080/views/index.html
npm run dev

# 开发完成后打包命令，会生成dist文件夹，不要在本地打开，请安装类似http-server来运行(dist后js/css／api路径会指向我的github，可以在config／index.js下修改assetsPublicPath)
npm run build

前期准备

1. 选择一个多页面开发案例参考，结合自己的实际情况修改一下，这里主要参考了以下一些案例

   • https://github.com/bluefox1688/vue-cli-multi-page（参考多页面配置整体**）
   • https://github.com/jiananle/vue-multi-page（参考整个文件命名架构，比较适合我这种情况）
   • https://github.com/jarvan4dev/vue-multi-page（参考以模块名作为名字输出，避免以模块名里面的文件名作为名字输出导致覆盖）

2. 熟悉相关语法（基本了解就好，毕竟做项目的时候才会发现更多的问题）

   • es6基本使用方法
   • vue2.0官网，vue2 api
   • sass基本语法

遇到的问题及功能

• 引入资源路径不要写相对路径, 使用base.config.js中定义的alias，如index.vue

import CommonFooter from '../../components/common/footer.vue''  => import CommonFooter from 'components/common/footer.vue'

<style lang='scss' scoped>
@import "../../assets/scss/base/necessary.scss"; => @import "~assets/scss/base/necessary.scss";
</style>

home.scss

@import "../../../assets/scss/base/necessary.scss"; => @import "~assets/scss/base/necessary.scss";

background: url(../../assets/images/icon/loading.gif)  => background: url('~assets/images/icon/loading.gif')

• 多页面SPA的组织架构重整 UPDATAE 201.6.11

• mockjs模拟接口数据返回（Demo：删除购物车功能， 待点评列表）

• 基于vue-cli，使用vue2.3.3 + webpack2 + es6 + vuex2.3.1 + scss的脚手架

• 试用网站多语言支持(R5)

• 刚开始装上vue-cli，发现eslint语法太过严格（定义未使用，要多少个空格，结尾要空行等），所以进行适当调整（M4）

• eslint会对assets下面的第三方插件（自己下载引入的）也进行语法检测，有三种方法解决（A11）

• .vue如何使用组件（A4）

• .vue使用sass,注意是lang='scss'不是lang='sass' 也可以是lang='sass （A5）

• 如何npm一个带版本号的插件（A8）

• 如何请求后台数据（vue-resource方式），并且渲染到html上（A12）

• 微信jssdk如何设置全局，并且使用

• 使用v:bind:style设置background（A13）

• class使用多条件进行判断（A15）

• 如何生成一个tree目录（额外内容）（A18）

• html-loader部分代替服务器SSI（.html文件使用SSI来include类似JS或CSS资源目前没有找到很好的解决方法）(M1)

• 子传父，父传子，非父子组件（BUS方式）之间传值问题（M8/M9/M10/M11）

• set使用导致html{{}}无法输出2层 以上的object(M15）

• img:src绑定assets下图片404问题(M9）

// 使用
<img src="~@assets/image/***.png">

• 使用filters(M12）

• .js或.vue中script使用import（或require）文件引入.scss文件没有自动添加浏览器前缀问题，npm run dev 和npm run build 编译后浏览器前缀解析（丢失部分）不一样问题(M17)

• 加入vuex逐步取代之前bus组件通讯方式，axios代替之前的vue-resource方案 已全部代替(M18/M22)

• 使用async/await来处理多个异步action且有依赖关系(M23）

• dev模式下插入到html文件的script标签顺序没问题（例如，先是vendor.js里面包含vue,vuex集合，然后再是index.js），但是build后，顺序是反过来的，导致Cannot read property 'call' of undefined报错(M25）

• iscroll5.2 在谷歌V56模拟器或者真机不能滑动的解决方案(M28）

以上括号数字代表note/byluchanan.docx（没有特殊说明都是这个文件）里面的问题序号（蓝色下划线部分），R*代表.md文件名序号，更多详情看note文件下

由于docx在git对比的不方便性，于2017/3/3 21:27结束编写，之后的问题以.md方式记录，放在note下

目前完成的模块

• 首页

• 登录

• 个人中心SPA包含我的、消息列表、我的收藏、客服页，设置，待点评

• 目的地选择

• 购物车列表

说明

使用的图片资源，接口均来自chrome分析出来的，学习之用。

vue2.0-multi-page's Issues

请教如何添加 image-webpack-loader

{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loaders: [
{
loader: 'url-loader',
query: {
limit: 8192,
name: utils.assetsPath('images/[name].[hash:7].[ext]')
}
},
{
loader: 'image-webpack-loader',
query: {
progressive: true,
optimizationLevel: 8,
interlaced: false,
pngquant: {
quality: '70-90',
speed: 4
}
}
}
]
}

以上配置会报错，或者有什么方法做图片压缩吗

请问你个问题：

使用async/await来处理多个异步action且有依赖关系(M23）
这个问题你是怎么解决的？我也遇到依赖的问题了。。。
希望大神能帮帮忙。。。

run dev：webpack：failed to compile

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi collect

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi collect

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi destinationIndex

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi index

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi login

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi messageList

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi my

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi service

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi setting

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi shoppingCart

ERROR in Loader E:\project\vvic\branches\vvic-h5\node_modules\eslint\lib\api.js didn't return a function
 @ multi flexible

run dev 的时候报错。会不会是node版本问题 我本地 4.2.3

vue2.3_multi_page那个分支不见了

我想看一下前辈解决vue autoprefixer的办法，十分感谢

标签没有按照正常顺序加载，run dev 是对的 run build是错的！！！

Base64变量没定义，浏览器报错

\static\js\lib\base64.js

// that's it!
    if (global['Meteor']) {
        Base64 = global.Base64; // for normal export in Meteor.js
    }

ie支持问题

博主你好，多页面项目要给成pc用的，怎么加babel-polyfill的啊？

关于多页面传参问题

请问，您是准备如何实现在不同页面之间的传参问题呢？ 完成例如： 点击首页的图片，跳转到对应的page 等等。 期待您的回复

jssdk全局

可以配置一个入口index.html 所有的全局使用的资源都可以放在index.html

如何打开产品详情页？

如何打开产品详情页？

比如，我要进行这个产品的详情页，它的路由不是固定的，这种情况还适合多页应用吗？

npm run build页面没有办法正常显示

这个问题解决了没啊==好尴尬，忙了两天了，还没搞好，我用的是element

请问同时发起多个异步请求，loading 拦截器怎么做到全部请求完毕后再隐藏

现在是只要其中一个请求返回 response 就会隐藏 loading，事实还有未返回的请求还在加载