用Webpack构建Vue

最新推荐文章于 2024-06-07 17:03:35 发布

傲娇程序媛

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量673

点赞数

分类专栏：前端文章标签： Webpack

本文链接：https://blog.csdn.net/u013225109/article/details/53317363

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js

一套构建用户界面的渐进式框架；采用自底向上增量开发的设计。
Vue的核心库只关注视图层。
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

用Webpack构建Vue

1.新建项目

mkdir studyVue
cd studyVue
npm init

2.用Webpack构建Vue

npm install webpack --save-dev
//app文件夹用来存放原始数据
//public文件夹用于存放给浏览器读取的数据（包括使用webpack生成的打包后的js文件和一个index.html文件）
mkdir app public

2.1public文件夹中的index.html文件

cd public
touch index.html

//index.html->推荐学习Emmet
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="bundle.js"></script>
</body>
</html>

2.2app文件夹中的main.js文件

cd ../app
touch main.js

//mian.js
import Vue from "vue"
new Vue({
    el: "#app",
    data: {
        message: "Hello Vue!"
    }
})

2.3安装本地库

cd ../
npm install webpack-dev-server --save-dev
npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev
npm install vue --save

2.4重点：webpack.config.js

//webpack.config.js
module.exports = {
   //页面入口文件配置
   entry: __dirname + "/app/main.js",
   //入口文件输出配置
   output: {
      path: __dirname + "/public",//打包后的文件存放的地方
      filename: "bundle.js"//打包后输出文件的文件名
   },
   module: {
      loaders: [{
         test: /\.js$/,
         loader: "babel-loader",
         exclude: /node_modules/
      }]
   },
   devServer: {
      contentBase: "./public",
      colors: true,
      historyApiFallback: true,
      inline: true
   },
   resolve: {
      alias: {
         "vue$": "vue/dist/vue.js"
      }
   }
}

touch .babelrc
//.babelrc
{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"]
}

2.5修改package.json文件

//package.json
{
  "name": "studyvue",
  "version": "1.0.0",
  "description": "Study Vue and Webpack",
  "scripts": {
    "start": "webpack"
  },
  "author": "yxq",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "vue": "^2.1.0"
  }
}