核心目标
使用 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 build
- App.vueapp.jsmain.js
输出到默认文件夹./dist/main.js
来源: https://www.qcloud.com/developer/article/1329061