从0开始Vue.js 和 Webpack 4 [1]
从0开始Vue.js 和 Webpack 4 [1]
bit20041436
修改于 2018-09-05 18:06:31
修改于 2018-09-05 18:06:31
核心目标
- 使用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文件结构
文件结构
- app.js : 应用程序入口
- App.vue: 根组件
- pages: 包含所有顶级组件的文件夹，每个组件都有一个与之关联的路由入口
- components: 块组件的文件夹，组件将根据功能组织到子文件夹中
- 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 buildApp.vue→app.js→main.js
输出到默认文件夹./dist/main.js
本文系外文翻译，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系外文翻译，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录