Loading

webpack手动搭建vue运行环境

webpack手动搭建vue运行环境

先看最终配置完的文件目录

│  .babelrc
│  index.html
│  package.json
├─build
│      webpack.base.js
│      webpack.dev.js
└─src
    │  App.vue
    │  index.js
    ├─router
    │      index.js
    └─views
            App.vue
            home.vue

 第一步、webpack配置

入口配置、输出配置，webapck插件加载，文件解析配置等

//build/webpack.base.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
function resolve (dir) {
    return path.join(__dirname, '..', dir)
}
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:'compiled/js/[name].[chunkhash:8].js',
        chunkFilename:'compiled/js/[name].[chunkhash:8].js'
    },
    resolve:{
      extensions:['.js','.vue','.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
        }
    },
    module:{
      rules:[
          {
              test: /\.vue$/,
              loader: 'vue-loader',
          },
          {
              test: /\.js$/,
              loader: 'babel-loader',
          },
      ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'./index.html',
            hash:true
        }),
        new VueLoaderPlugin()
    ]
}

第二步、devServer 配置

//build/webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.base');
const path = require('path');

module.exports = merge(common,{
    devtool:'source-map',
    devServer:{
        contentBase:path.join(__dirname,'dist'),
        historyApiFallback:true,
        host:'localhost',
        port:8080,
        open:false,
        proxy:{

        }
    }
})

第三步、新建Vue所需文件

新建路由文件src/router/index.js

import Vue from 'vue';
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            name: 'home',
            path: '/',
            component: resolve => require(['./../views/home'], resolve),
        }
     ]
})　　

新建文件src/views/home.vue

<template>
    <div class="container">
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: "ForeEnd",
        data(){
            return {
                msg:'abc'
            }
        }
    }
</script>

<style scoped>

</style>

新建src/App.vue文件(路由的挂载点文件 ，路由每变动一次，都会将当前路由文件塞到router-view中)

// src/App.vue
<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>
<style>
</style>

新建src/index.js (Vue的路口文件或者说是Vue的全局文件)

// src/index.js
import Vue from 'vue';
import router from './router'
import App from './App'
new Vue({
    router,
    components:{App},
    template:'<App/>'
}).$mount('#app')

 

新建index.html（Vue文件渲染从App.vue->index.html）

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

第四步、package.json配置

项目启动命令、项目依赖

// package.json
{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --config build/webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^2.1.1",
    "postcss-loader": "^3.0.0",
    "autoprefixer": "^9.6.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3",
    "webpack-dev-server": "^3.7.1",
    "webpack-merge": "^4.2.1",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.4.3"
  }
}

最后执行以下命令安装依赖

npm install 或者 cnpm install(如果安装了得话)　
npm run start //启动 浏览器打开localhost:8080就可以访问首页了

　　

 

posted @ 2020-08-13 11:12  冯叶青  阅读(401)  评论(0)  编辑  收藏  举报