专栏首页IT民工生存指南从0开始Vue.js 和 Webpack 4 [1]

从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 条评论
登录 后参与评论

相关文章

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

    原因:当配置index.html时,指定了javascript的具体路径,为了使热模块重新加载工作,需要允许注入此路径,这样就可以实时更新html了。

    bit20041436
  • 初试 Kubernetes -集群搭建

    主节点(个人很喜欢腾讯云的主机自动命名,内网IP之类的都已经在hostname里了,不容易出错)

    bit20041436
  • Debian9 安装php7.2+mariadb10+openresty

    bit20041436
  • webpack基础探讨

    IMWeb前端团队
  • 用 webpack 4.0 撸单页/多页脚手架 (jquery, react, vue, typescript)

    首先来简单介绍一下webpack:现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个...

    徐小夕
  • 实现实时打包构建

    由于使用--contentBase指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐大家使用ht...

    DataScience
  • Android WebView与JS交互实例

    好久就想写这篇文章了,一直到现在才着手,其实更好,经过之前这么长时间理解的更透彻了。

    Jingbin
  • jQuery 插件

    jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入

    清出于兰
  • 前端成神之路-vue前端工程化

    小结:推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

    海仔
  • SaaS-多租户SaaS平台的数据库方案(前端框架)

    通过淘宝镜像下载安装所有的依赖,几分钟后下载完成 如果没有安装淘宝镜像,请使用npm install

    cwl_java

扫码关注云+社区

领取腾讯云代金券