All Projects → luchanan → Vue2.0 Multi Page

luchanan / Vue2.0 Multi Page

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

Programming Languages

javascript
184084 projects - #8 most used programming language
es6
455 projects

Projects that are alternatives of or similar to Vue2.0 Multi Page

Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (+24.27%)
Mutual labels:  webpack, vue-cli, scss, vue2
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目,一个PC端页面入口,一个移动端页面入口,且有各自的路由, vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-29.61%)
Mutual labels:  webpack, vue-cli, vue2
Vue Music
使用vue2.0构建音乐播放器
Stars: ✭ 60 (-70.87%)
Mutual labels:  webpack, vue-cli, vue2
Github Ranking
🔍GitHub不同语言热门项目排行,Vue.js做页面展示
Stars: ✭ 160 (-22.33%)
Mutual labels:  webpack, vue-cli, vue2
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+141.26%)
Mutual labels:  webpack, vue-cli, vue2
Vue2 blog
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + express + pm2 + webpack+nginx构建的具有登录,注册,留言,用户发帖,用户评论等功能的SPA Blog。注意,注意,注意,后端API全部自己手写,很适合刚学习vue以及express的小伙伴学习,喜欢请Star鼓励一下我,谢谢!项目预览:
Stars: ✭ 417 (+102.43%)
Mutual labels:  webpack, vue-cli, vue2
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (+20.87%)
Mutual labels:  webpack, scss, vue2
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+253.88%)
Mutual labels:  webpack, scss, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+905.83%)
Mutual labels:  webpack, vue-cli, vue2
Electron Vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
Stars: ✭ 14,610 (+6992.23%)
Mutual labels:  webpack, vue-cli
Gpk admin
✨ GeekPark Content Management System
Stars: ✭ 150 (-27.18%)
Mutual labels:  vue-cli, vue2
Awesome Vue Cli3 Example
🦅 Awesome example for rapid Vue.js development using vue-cli3 .
Stars: ✭ 160 (-22.33%)
Mutual labels:  webpack, vue-cli
Vue Wechat
🔥 基于Vue2.0高仿微信App的单页应用
Stars: ✭ 1,832 (+789.32%)
Mutual labels:  vue-cli, vue2
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-22.33%)
Mutual labels:  vue-cli, vue2
Avvw
Apicloud + Vue2 + Vant(有赞前端)+ Webpack4打包,极速开发APP框架,将apicloud的渲染效率和vue数据绑定特性发挥极致!
Stars: ✭ 143 (-30.58%)
Mutual labels:  webpack, vue2
Spring Boot Vuejs
Example project showing how to build a Spring Boot App providing a GUI with Vue.js
Stars: ✭ 1,818 (+782.52%)
Mutual labels:  webpack, vue-cli
Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (+867.48%)
Mutual labels:  vue-cli, vue2
Yfiles For Html Demos
Contains demo sources for the JavaScript diagramming library yFiles for HTML
Stars: ✭ 202 (-1.94%)
Mutual labels:  webpack, vue-cli
Douban
Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
Stars: ✭ 2,324 (+1028.16%)
Mutual labels:  vue-cli, vue2
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+1051.94%)
Mutual labels:  webpack, vue2

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. 选择一个多页面开发案例参考,结合自己的实际情况修改一下,这里主要参考了以下一些案例

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

遇到的问题及功能

  • 引入资源路径不要写相对路径, 使用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="[email protected]/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分析出来的,学习之用。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].
OSZAR »