使用webpack自己搭建一个vue项目

首先引入的依赖

{
  "name": "yarntest",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "vue": "^2.6.11",
    "vue-hot-reload-api": "^2.3.4",
    "vue-loader": "15.7.0",
    "vue-router": "^3.3.4",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuex": "^3.5.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "jquery": "^3.5.1",
    "less": "^3.11.3",
    "less-loader": "^6.1.1",
    "style-loader": "^1.2.1",
    "webpack-cli": "^3.3.11"
  }
}

指定入口和出口的文件 webpack.config.js

const path=require('path')
const MiniCssPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin =require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
    //单个入口文件

     entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'main.js'
    },
    devServer:{
        contentBase:path.join(__dirname, 'dist'),//设置服务器要访问路径
        host:'localhost',//服务器的IP地址
        port:8080,//服务器的端口号
        open:true ,//自动打开页面
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader' // 处理以.vue结尾的文件
            },
            //引入css
            {
                test:/\.css$/,
                use:[ 'style-loader', 'css-loader']//引入的顺序至关重要,不可改变
            },
            //使用es6语法(1)
            {
                test:/\.js$/,
                exclude:/node_module/,//排除node_module的内容，影响性能
                use:'babel-loader'
            },
            {
                test:/\.css$/,
                use:[MiniCssPlugin.loader, 'style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader', 'css-loader','less-loader']
            }
      /**
         第二种方式不需要创建 .babelrc文件，直接配置options选项    
      {
      test:/\.js$/,
      exclude:/node_modules/,
      use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
      }
    }
             */
        ]
    },
    //单独分离css 打包后的文件在css下
    stats: {
        children: false
      },
    plugins:[
        new VueLoaderPlugin(),
        new MiniCssPlugin({
          filename:'./css/[name].css'
        }),
        new HtmlWebpackPlugin({
            template:'./src/index.html',//指定模板
            filename:'index.html' ,//打包后也是index.html
            minify: {
                collapseWhitespace: true,
              },
              hash: true,
              inject: true,
        })

      ]

}

目录结构

图片说明

.babelrc

{
    "presets":["@babel/preset-env"]
  }

index.js入口文件,引入了vuex与vue-router

import {store} from './compontent/vuex/index'
import Vue from 'vue'
import App from '../src/app.vue'
import router from "./router/router.js"    // import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错
new Vue({
  el: '#app', //相当于.$mount("#app")挂载
  router,  // 注入到根实例中
  store, //注入vuex实例
  render: h => h(App)//让App组件实例化
})

// new Vue({
//     router,
//     render: (h) => h(App) //实质是一个箭头函数 return app
// }).$mount("#app")//将实例的app.vue组件挂载到id为app的html页面中

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app"> 
<!--挂载的节点
路由之间的跳转，会被组件挂载覆盖
<router-view></router-view>-->
</div>
</body>
<script>
</script>
</html>

app.vue

<template>
    <div>
        {{text}}主组件 
        <!-- <router-link :to="{path:'/hello'}">跳转</router-link>
          <router-link :to="{path:'/home'}">跳转</router-link>
         <router-view/> -->
         <router-view/>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                text: '236' ,
            }
        },
/*
        created(){
            console.log(this.$store.state.moduleA.count) //打印
            console.log(this.$store.getters.getstate)
        },
        computed:{

        }
*/
    }
</script>

下面配置vue-router router.js

import Vue from "vue";
import VueRouter from "vue-router";
import  HelloWorld from '../compontent/HelloWorld.vue'
import  home from '../compontent/home.vue'
import App from '../app.vue'

Vue.use(VueRouter);

const routes = [
            {
                  path:"/hello",
                  component: HelloWorld
             },
              {
                    path:"/home",
                    component:home
              }

]
var router =  new VueRouter({
    routes
})
export default router

下面配置vuex

图片说明

对vuex进行了模块化，这样做项目的时候好区分
modualA.js

const moduleA = {
    state: () => ({ 
        count:"moduleA"
     }),
     //mutations 同步操作
    mutations: { 

     },
     //action 可以包含任意异步操作。
    actions: { 

     },
     //get方法
    getters: { 
        getstate:state=>{
            return state.count+"aaa"
        }
     }
  }
  export default moduleA //抛出模块

module/index.js 将所有的模块整合起来

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/modualA'


Vue.use(Vuex);

export const store = new Vuex.Store({
    modules:{
        moduleA
    }

})

//或者 export default store

vuex与vue-router在index.js入口文件的配置如上面代码。
到这里一个vue项目就建成了
图片说明