手写简单脚手架：通过webpack启服务运行vue模块文件

最新推荐文章于 2023-07-08 15:27:17 发布

duansamve

最新推荐文章于 2023-07-08 15:27:17 发布

阅读量583

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/duansamve/article/details/81841546

版权

vue 专栏收录该内容

94 篇文章 5 订阅

订阅专栏

一、创建项目目录结构：

webpack-demo：

-index.html

-main.js：入口文件

-app.vue：vue主文件

-package.json：工程依赖文件

-webpack.config.js：webpack配置文件

-.babelrc：babel配置文件

二、package.json：安装相关模板（生产模块/开发模块/服务命令）

cnpm i vue --S //i install --S --save

cnpm i -D webpack webpack-dev-server

cnpm i --D css-loader file-loader style-loader

cnpn i --D vue-loader vue-html-loader vue-style-loader vue-template-compiler

cnpm i --D babel-loader babel-core babel-preset-env

babel-preset-env：会根据配置的运行环境自动启用需要的babel插件

安装后的package.json文件如下，特别注意下“scripts”中“dev”的配置：

{
  "name": "vue-cli-created-by-self",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --port 8888" //
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.3.2",
    "css-loader": "^0.28.0",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

三、配置webpack webpack.config.js

module.exports = { //模块
    entry: './main.js', //入口文件
    output: { //将VUE文件编译输出
        path: __dirname+'/dist',
        filename: 'build.js' //所有的JS放入build.js
    },
    module: {
        rules: [ //加载规则
            {
                test: /\.vue$/, //VUE文件
                loader: 'vue-loader' //加载器
            },
            {
                test: /\.js$/,
                loader: 'babel-loader', //es6转换，所有的es6文件加载及转换
                exclude: /node_modules/ //排除这个目录
            },
        ]
    }
};

四、编写main.js：main.js是入口文件，webpack编译会通过根目录文件打包到build.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    render: h=>(App)
/*    render: function(createElement){
        return createElement(App);
    }*/
});

五、app.vue

<template>
    <div id="app">
        <h1>Welcome to</h1>
        <User></User>
    </div>
</template>

<script>
    import User from './User.vue'
    export default {
        name: 'App',
        components: {
            User
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

六、编写babelrc

七、index.html引用build.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-project</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/build.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

此时，webpack将vue/js打包到build.js，先执行npm install

八、运行测试npm run dev

duansamve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写简单脚手架：通过webpack启服务运行vue模块文件

一、创建项目目录结构：webpack-demo：-index.html-main.js：入口文件-app.vue：vue主文件-package.json：工程依赖文件-webpack.config.js：webpack配置文件-.babelrc：babel配置文件二、package.json：安装相关模板（生产模块/开发模块/服务命令）cnpm i vue -...
复制链接

扫一扫