用webpack（2.x语法）手动搭建Vue项目

本文github地址可打包下载
webpack是一个模块加载器，一切东西都是模块（包括css、html、js、图片等）, 最后都打包到一块了。
下面我将搭建一个简单的demo

一、新建目录结构

    |-index.html
    |-main.js   //入口文件
    |-App.vue   //vue文件，官方推荐命名法（首字母大写）
    |-package.json  //工程文件(项目依赖、名称、配置)，记录需要的依赖包
        npm init --yes 生成
    |-webpack.config.js //webpack配置文件

二、编写相关文件

1. index.html页面：展示页面

<body>
    <div class="box">  //用于挂载到vue实例上
      <app></app>  //app组件
    </div>
    <script src="build.js"></script>//引入用webpack打包后的js文件
</body>

2. App.vue组件：写一条数据

<template>
  <div>
    <h1>hellow word</h1>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: 'welcome Vue'
            }
        }
    }
</script>
<style>
  body{
    background-color: #ccc;
  }
</style>

3. main.js入口文件（需要在webpack.config中规定）

import Vue from 'vue'  //引入主角vue.js，这里是因为在webpack.config中进行配置地址了
import App from './App.vue'

new Vue({
    el: '.box',
    components:{
        app: App
    }
})

4. webpack.config文件配置webpack的选项

var webpack = require('webpack')  //引入文件
module.exports={
    entry:'./main.js', //配置入口
    output:{  //配置输出选项
        path:__dirname,//输出路径为，当前路径下
        filename:'build.js'//输出后的文件名称
    },
    resolve: {//其他的配置选项
        alias: {
            'vue': 'vue/dist/vue.js'//vue文件地址配置
        }
    },
    module:{
        loaders:[//loader配置，需要解析啥东西就用相关的loader
            {test:/.vue$/, loader:'vue-loader'},
            {test:/.js$/, loader:'babel-loader', exclude:/node_modules/}//设置node_modules里的js文件不用解析
        ]
    },
    plugins: [//这个是2.x中加的，各种loader的配置选项
        new webpack.LoaderOptionsPlugin({
            options: {
              babel:{
                  presets:['es2015'],
                  plugins:['transform-runtime']
              }
            }
        })
    ]
};

5. package.json文件

注意：devDependencies和dependencies不是手动写入的，是在安装依赖的时候自动保存进来的

{
  "name": "webpacklist",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server --inline --hot --port 8088"  //设置启动服务命令，热更新
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0", //解析es6语法
    "babel-core": "^6.24.1",//解析es6语法
    "babel-loader": "^6.4.1",//解析es6语法
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",//解析es6语法
    "babel-runtime": "^6.23.0",
    "css-loader": "^0.28.0",
    "vue-hot-reload-api": "^2.1.0",//解析js文件
    "vue-html-loader": "^1.2.4",//解析vue中的html语法啊
    "vue-loader": "^11.3.4",
    "vue-style-loader": "^3.0.0",//解析行间样式，需要两个一起写（和css-load）的时候style-loader必须要写在前面
    "vue-template-compiler": "^2.2.6",//解析vue中的template
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
      "vue": "^2.2.6"  //vue.js主文件
  }
}

6. 安装依赖文件

运行命令 => npm install --save-dev "模块名称"

7. 开启服务

运行命令 => npm run dev

版权声明：本文来源简书，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.jianshu.com/p/a87dee15e6c3
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-01-08 22:06:23
阅读 ( 1617 )
分类：前端

用webpack（2.x语法）手动搭建Vue项目

一、新建目录结构

二、编写相关文件

1. index.html页面：展示页面

2. App.vue组件：写一条数据

3. main.js入口文件（需要在webpack.config中规定）

4. webpack.config文件配置webpack的选项

5. package.json文件

6. 安装依赖文件

7. 开启服务

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看