Vue + Webpack 实践

fsmStudy 发布于2019-08-20 11:19 / 1900人阅读

摘要：模块热加载是的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。这是一个生态系统中一个伟大创举。

Vue全家桶 参考

vue-tutorial

Vue+Webpack开发可复用的单页面富应用教程

Vue+Webpack使用规范
对比其他框架

推荐代码使用 CommonJS 或 ES6 模块，然后使用 Webpack 或 Browserify 打包。

你可以使用 Webpack + vue-loader 或 Browserify + vueify 构建这些单文件 Vue 组件。

可以在 Webpackbin.com 上在线尝试！
chrome开发工具 : vue-developertools

安装

我们将会使用webpack去为我们的模块打包，预处理，热加载。如果你对webpack不熟悉，它就是可以帮助我们把多个js文件打包为1个入口文件，并且可以达到按需加载。这就意味着，我们不用去担心由于太多的组件，导致了过多的HTTP请求，这是非常有益于产品体验的。但，我们并不只是为了这个而使用webpack，我们需要用webpack去编译.vue文件，如果没有使用一个loader去转换我们.vue文件里的style，js，html，那么浏览器就无法识别。

模块热加载是webpack的一个非常碉堡的特性，将会为我们的单页应用带来极大的便利。

通常来说，当我们修改了代码刷新页面，那应用里的所有状态就都没有了。这对于开发一个单页应用来说是非常痛苦的，因为需要重新在跑一遍流程。如果有模块热加载，当你修改了代码，你的代码会直接修改，页面并不会刷新，所以状态也会被保留。

Vue也为我们提供了CSS预处理，所以我们可以选择在.vue文件里写LESS或者SASS去代替原生CSS。

我们过去通常需要使用npm下载一堆的依赖，但是现在我们可以选择Vue-cli。这是一个vue生态系统中一个伟大创举。这意味着我们不需要手动构建我们的项目，而它就可以很快地为我们生成。

使用脚手架工具 vue-cli 可以快速地构建项目：单文件 Vue 组件，热加载，保存时检查代码，单元测试等。

安装vue-cli (确保你有node和npm)

$ npm install -g vue-cli

使用脚手架初始创建项目

$ vue init

Example:*创建一个webpack项目*

$ vue init webpack my-project

项目模版下载好了之后需要安装项目用到的依赖包

$ cd my-project
$ npm install

这时可以将项目运行起来看看效果了

$ npm run dev

这一行命令代表着它会去找到package.json的scripts对象，执行node bulid/dev-server.js。在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器，我们在localhost:8080即可查看我们的应用。

vue-cli 构建的目录结构

.
├── build/                      # webpack config files
│   └── ...
├── config/                     
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

更多内容参照https://vuejs-templates.github.io/webpack

Vue 指令

常用指令:

v-if

v-show

v-else

v-for

v-bind

v-on

v-model
更多指令请移步Vue 指令

初始化（main.js)

对于单页应用，推荐使用官方库 vue-router。详细请查看它的文档。

添加route配置

import VueRouter from "vue-router"
import VueResource from "vue-resource"

import Hello from "./components/Hello.vue"
import Page from "./components/Page.vue"

//注册两个插件
Vue.use(VueResource)
Vue.use(VueRouter)

const router = new VueRouter()

// 路由map
router.map({
  "/hello": {
    component: Hello
  },
  "/page": {
    component: Page
  }
})

router.redirect({
  "*": "/hello"
})

router.start(App, "#app")//设置启动页面

index.html

应用route

创建＆应用组件

如果你喜欢预处理器，甚至可以这么做：

定义View:

定义Model和ViewModel:

    var vueComponent = require("../components/vue-component");
    module.exports = {
        components: {
            vueComponent
        }
    }

数据请求:vue-resource

//在main.js中注册vue-resource
import VueResource from "vue-resource"
Vue.use(VueResource)

// 基于全局Vue对象使用http
Vue.http.get("//webapi.busi.inke.com/web/live_hotlist_pc", {}).then((response) => {
    console.log("[Leo]Vue-resource:success=>", response);
}, (response) => {
    console.log("[Leo]Vue-resource:error=>", response);
});
// 在一个Vue实例内使用$http
this.$http.get("//webapi.busi.inke.com/web/live_hotlist_pc", {}).then((response) => {
    console.log("[Leo]Vue-resource:success=>", response);
}, (response) => {
    console.log("[Leo]Vue-resource:error=>", response);
});

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80510.html

webpack+vue+vux+express+lowdb实践

摘要：花了一天时间，做了一套加班报名系统，前端基于，后端基于。如果需求对视觉要求不高，还是非常推荐把引进到项目中的。提供了各种各样的组件，基本上拿来就能用。需要注意的是，读写文件默认都是同步的，将的写配置成异步写入能极大的提升性能。花了一天时间，做了一套加班报名系统，前端基于webpack+vue+vux，后端基于express+lowdb。以前在项目中也都接触过webpack+vue，第...

awesome23 2019-07-25 13:47 评论0 收藏0
ABAP system landscape和vue项目webpack构建的最佳实践

摘要：基于的一般都有，和三种类型的系统。而前端项目的设置也类似。而无论是开发，测试还是生产，代码都相同。之所以要引入也是类似面向对象的编程思想，把和环境一些通用的配置抽取出来，避免在和里重复定义。基于Netweaver的ABAP transport route一般都有dev，test和prod三种类型的系统。 showImg(https://segmentfault.com/img/rem...

yeooo 2019-08-23 12:36 评论0 收藏0
webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目，希望对你有帮助。 github地址, 有不错的就更新官方文档中文指南初级教程 webpack-howto 作者：Pete Hunt Webpack 入门指迷作者：题叶　 webpack-demos 作者：ruanyf 一小时包教会 —— webpack 入门指南作者：VaJoy Larn　　 webpack 入门及实践作者：...

Backache 2019-08-21 14:05 评论0 收藏0
记一次vue-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
Vue单页面骨架屏实践

github 地址： VV-UI/VV-UI 演示地址: vv-ui 文档地址：skeleton 关于骨架屏介绍骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。这里主要通过代码为大家展示如何一步步做出这样一个骨架屏： show...

DevTTL 2019-08-02 16:00 评论0 收藏0