Vue-Webpack简单脚手架搭建

灰太狼 2022-06-10 13:17 277阅读 0赞

当前Vue版本2.4.2，Webpack版本3.5.5。

# 搭建简单的Vue脚手架 #

基本安装

mkdir vue-start && cd vue-start
    npm init -y
    cnpm install --save-dev webpack html-webpack-plugin clean-webpack-plugin webpack-dev-server
    cnpm install --save-dev babel-core babel-loader babel-preset-vue-app
    cnpm install --save-dev css-loader style-loader file-loader url-loader
    cnpm install --save-dev postcss-loader autoprefixer
    cnpm install --save-dev vue-loader vue-template-compiler
    cnpm install --save vue

新建webpack.config.js

修改package.json文件

"scripts": {
        "build": "webpack",
        "start": "webpack-dev-server --open"
      },

增加.babelrc配置文件

{
      "presets": ["vue-app"] }

增加postcss.config.js文件

module.exports = {
      plugins: [
        require('autoprefixer')()
      ]
    }

# 搭建demo页面 #

新建src目录，在src下新建App.vue文件如下：

<template> <div id="app"> <h1>{ { msg }}</h1> </div> </template> <script> export default{ data () { return { msg: 'Hello World!' } } } </script> <style> h1{ color:red; } </style>

新建index.js如下：

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

> 命令行运行npm run start，打开浏览器，可以看到红色的Hello World!，将h1样式改成green，可以看到浏览器自动刷新成绿色。

运行npm run build，可以看到工程目录下多了dist目录。

源代码地址：[https://github.com/wu-boy/vue-demo][https_github.com_wu-boy_vue-demo]，vue-start目录。

本例子配置简单，仅用于学习使用。

[https_github.com_wu-boy_vue-demo]: https://github.com/wu-boy/vue-demo