allan2coder / Vue2 Spa Tutorial
Vue2.x（即将升Vue 3）、 Webpack 4.x、Babel 7.x
Stars: ✭ 267
Projects that are alternatives of or similar to Vue2 Spa Tutorial
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+173.03%)
Mutual labels: webpack, vue-router, vue2
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+387.64%)
Mutual labels: webpack, webpack4, vue-router
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-94.01%)
Mutual labels: webpack, vue-router, vue2
Webpack Starter Basic
A simple webpack starter project for your basic modern web development needs.
Stars: ✭ 552 (+106.74%)
Mutual labels: webpack, webpack4, spa
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目，一个PC端页面入口，一个移动端页面入口，且有各自的路由， vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-45.69%)
Mutual labels: webpack, vue-router, vue2
Cordova Template Framework7 Vue Webpack
Framework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement
Stars: ✭ 630 (+135.96%)
Mutual labels: webpack, webpack4, vue2
Vue Spa
vue-spa ： vue + vue-router + axios + vuex + vux 快速成型移动端项目，直接使用。欢迎star
Stars: ✭ 46 (-82.77%)
Mutual labels: webpack, vue-router, spa
Vue Shiyanlou
😘基于vue2和vuex的复杂单页面应用，20+页面53个API（仿实验楼）✨✨
Stars: ✭ 342 (+28.09%)
Mutual labels: webpack, vue-router, vue2
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-55.06%)
Mutual labels: webpack, vue-router, spa
Vue Spa Project
vue.js + vuex + vue-router + fetch + element-ui + es6 + webpack + mock 纯前端SPA项目开发实践
Stars: ✭ 118 (-55.81%)
Mutual labels: webpack, vue-router, spa
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+86.14%)
Mutual labels: webpack, vue-router, vue2
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (-6.74%)
Mutual labels: webpack, vue-router, vue2
Vue2 News
基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条（移动端）
Stars: ✭ 462 (+73.03%)
Mutual labels: webpack, vue-router, spa
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+152.06%)
Mutual labels: webpack, webpack4, vue-router
Vue2 Echo
基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声
Stars: ✭ 408 (+52.81%)
Mutual labels: webpack, vue-router, spa
163music
🎵163 music web app built with Vue 2.6, server side render, webpack 4
Stars: ✭ 139 (-47.94%)
Mutual labels: webpack4, vue-router, vue2
Vue Cnodejs
基于vue.js重写Cnodejs.org社区的webapp
Stars: ✭ 3,065 (+1047.94%)
Mutual labels: webpack, vue-router, vue2
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+405.24%)
Mutual labels: webpack, vue-router, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+676.03%)
Mutual labels: webpack, vue-router, vue2
Vue2-SPA
可能是全网最干净的 vue 脚手架
A Vue.js project with
Webpack 4.x
- 所有第三方包都已更新到最新
- 没有多余代码，让你自己搭建，自己玩
Live Demo
The live demo can be found in https://allan2coder.github.io/VUE2-SPA-Tutorial/ (移动端，打开浏览器开发者工具并调到手机窗口浏览。注：该项目同时适合PC端)
How to use
You should clone the repo and install the dependencies, and then npm start.That is all.
$ git clone https://github.com/allan2coder/VUE2-SPA-Tutorial.git
$ cd VUE2-SPA-Tutorial
$ npm install
Then launch the project app.
$ npm run dev
You should see a new browser tap opening and a page of 'index.html' in http://localhost:8080.
How to build the static files
npm run build
Screenshot
有关打包优化
第三方库单独打包
npm i autodll-webpack-plugin -D
webpack 配置：
new AutoDllPlugin({
inject: true, // will inject the DLL bundle to index.html
debug: true,
filename: '[name]_[hash].js',
path: './dll',
entry: {
vendor: ['vue', 'vue-router'] // webpack 会去 `node_modules` 去找
}
})
每次打包，这个插件都会检查注册在 entry 中的第三方库。如果没有变化，插件就会使用缓存中的打包文件，减少了打包的时间，这时 Hash 也不会变化。
Other SPA
- React.js 🔥 🔥 🔥
License
MIT
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].