从0开始Vue.js 和 Webpack 4 [1]

核心目标

  • 使用webpack-dev-server热加载模块
  • 使用eslint文件瘦身
  • 使用stylus进行CSS预处理
  • 使用@ vue / test-utils和Jest进行测试

环境需求

npm init -y

npm install --save vue vue-router

npm install --save-dev webpack webpack-cli

文件结构

文件结构
  1. app.js : 应用程序入口
  2. App.vue: 根组件
  3. pages: 包含所有顶级组件的文件夹,每个组件都有一个与之关联的路由入口
  4. components: 块组件的文件夹,组件将根据功能组织到子文件夹中
  5. router: 路由配置文件夹

文件内容

./src/app.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
})

./src/App.vue

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

./build/webpack.config.dev.js

'use strict'
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  mode: 'development',
  entry: [
    './src/app.js'
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

其他依赖

npm install --save-dev vue-loader vue-template-compiler vue-style-loader css-loader

./package.json

"build": "webpack --config build/webpack.config.dev.js"

./index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>My Vue app with webpack 4</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/main.js" type="text/javascript"></script>
  </body>
</html>

运行

npm run build

App.vue→app.js→main.js

输出到默认文件夹./dist/main.js

原文链接:https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a

原文作者:Daniel Cook

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

AppleWatch开发入门三——代码交互与控制器生命周期

        在前两篇博客中,讨论了关于watch开发中框架与界面布局相关,然而主要的逻辑,终究还是要通过代码来实现的,在我们创建了项目之后,就会生成Inte...

8030
来自专栏云服务试衣间

简单几步,利用Serverless,让COS中文件变更自动刷新CDN

SCF能实现事件式的触发,让你的一段代码跑在云上,无需自己去搭建服务器。而这里我们要利用能力:COS文件上传/删除的触发器。

6.4K290
来自专栏张善友的专栏

Remoting: Server encountered an internal error

发生这个错误的原因是Remoting的一个配置项: <customErrors> 元素   指示此应用程序域中的服务器通道是否将经筛选的或完整的异常信息返回给本...

19970
来自专栏北京马哥教育

Vim 新手节省时间的 10 多个小技巧

Vim 是很多开发者的首选编辑器,通过设置正确的命令和快捷方式,它可以帮你更快的完成工作。这篇文章我们为 Vim 新手提供一些快捷键等方面的小技巧,帮你提升工作...

38770
来自专栏无原型不设计

【Mockplus教程】复制/克隆

复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在...

31830
来自专栏Youngxj

一键删除&#65279字符造成的顶部空白行

15320

在Ubuntu 18.04上安装WordPress

WordPress是一个非常流行的专注于博客的动态内容管理系统(CMS)。WordPress可以部署在LAMP或LEMP堆栈上。它具有的可扩展插件框架和主题系统...

94610
来自专栏公众号_薛勤的博客

Maven报错Archive for required library:某.jar' in project '项目名'

8210
来自专栏草根专栏

使用VS Code开发asp.net core (上)

本文是基于Windows10的. 下载地址: https://code.visualstudio.com/ insider 版下载地址: https://cod...

36150
来自专栏魏艾斯博客www.vpsss.net

WDCP 面板安装微擎的过程记录

现在最流行的微信管理系统非微擎莫属了,太多人使用微擎来管理自己的微信公众号和微信小程序。同时很多人自行搭建微擎程序时候遇到了难题,为了解决这个难题魏艾斯博客前面...

33900

扫码关注云+社区

领取腾讯云代金券