首先引入的依赖
{ "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项目就建成了