vue qiankun 2023（二）子项目one

最新推荐文章于 2024-07-20 16:46:53 发布

康燕

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量73

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u010794365/article/details/134060806

版权

目录结构

项目具体代码

1. vue-one\public\index.html

<!DOCTYPE html>

<html lang="">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<title><%= htmlWebpackPlugin.options.title %></title>

</head>

<body>

<noscript>

<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

</noscript>

<div id="app"></div>



</body>

</html>

2. vue-one\.eslintrc.js

module.exports = {

root: true,

env: {

node: true

},

'extends': [

'plugin:vue/vue3-essential',

'eslint:recommended'

],

parserOptions: {

parser: '@babel/eslint-parser'

},

rules: {

'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

"no-unused-vars": "off"

}

}

3. vue-one\.gitignore

.DS_Store

node_modules

/dist

# local env files

.env.local

.env.*.local

# Log files

npm-debug.log*

yarn-debug.log*

yarn-error.log*

pnpm-debug.log*

# Editor directories and files

.idea

.vscode

*.suo

*.ntvs*

*.njsproj

*.sln

*.sw?

4. vue-one\babel.config.js

module.exports = {

presets: [

'@vue/cli-plugin-babel/preset'

]

}

5. vue-one\jsconfig.json

{

"compilerOptions": {

"target": "es5",

"module": "esnext",

"baseUrl": "./",

"moduleResolution": "node",

"paths": {

"@/*": [

"src/*"

]

},

"lib": [

"esnext",

"dom",

"dom.iterable",

"scripthost"

]

}

}

6. vue-one\package.json

{

"name": "vue-one",

"version": "0.1.0",

"private": true,

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

"sideEffects": true,

"dependencies": {

"core-js": "^3.8.3",

"vue": "^3.2.13",

"vue-router": "^4.0.3",

"vuex": "^4.0.0"

},

"devDependencies": {

"@babel/core": "^7.12.16",

"@babel/eslint-parser": "^7.12.16",

"@vue/cli-plugin-babel": "~5.0.0",

"@vue/cli-plugin-eslint": "~5.0.0",

"@vue/cli-plugin-router": "~5.0.0",

"@vue/cli-plugin-vuex": "~5.0.0",

"@vue/cli-service": "~5.0.0",

"eslint": "^7.32.0",

"eslint-plugin-vue": "^8.0.3",

"sass": "^1.32.7",

"sass-loader": "^12.0.0"

}

}

7. vue-one\vue.config.js

const port = 5501;//端口要和main里面配置的入口一致

const { name } = require('../package.json')

module.exports = {

publicPath: "./",

devServer: {

port,

headers: {

'Access-Control-Allow-Origin': '*'

}

},

configureWebpack: {

output: {

// 把子应用打包成 umd 库格式

library: `${name}-[name]`,

libraryTarget: 'umd',

chunkLoadingGlobal: `webpackJsonp_${name}`

}

}

};

8. src 的文件内容 vue-one\src\main.js

import { createApp } from "vue";

import App from "./App.vue";

import routes from "./router";

import store from "./store";

import { createRouter, createWebHistory } from 'vue-router'

import "./styles/index.css"

let install = null;

let history = null

let router = null

function render(props = {}) {

const { container, routerBase } = props;

history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL)

router = createRouter({

history,

routes

})

install = createApp(App).use(store).use(router).mount(container ? container.querySelector("#app") : "#app")

}

if (window.__POWERED_BY_QIANKUN__) {

// eslint-disable-next-line

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

} else {

render();

}

export async function bootstrap() { }

export async function mount(props) {

render(props);

}

export async function unmount() {

console.log('vue3 app unmount');

history = null // 当子应用被卸载后我们将路由等全部清空

install = null // eslint-disable-next-line no-unused-vars

router = null

}

9. vue-one\src\App.vue

<template>

<div>

<nav>

<router-link to="/">Home</router-link> |

<router-link to="/about">About</router-link>

</nav>

<router-view />

</div>

</template>

<style lang="scss">

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

nav {

padding: 30px;

a {

font-weight: bold;

color: #2c3e50;

&.router-link-exact-active {

color: #42b983;

}

}

}

</style>

10. vue-one\src\components\HelloWorld.vue

<template>

<div class="hello">

<h1>{{ msg }}</h1>

</div>

</template>

<script>

export default {

name: 'HelloWorld',

props: {

msg: String

}

}

</script>



<style scoped lang="scss">

h1 {

width: 100%;

height: 30px;

}

</style>

11. vue-one\src\router\index.js

import HomeView from '../views/HomeView.vue'

const routes = [

{

path: '/',

name: 'home',

component: HomeView

},

{

path: '/about',

name: 'about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

}

]

// const router = createRouter({

// history: createWebHistory(process.env.BASE_URL),

// routes

// })

export default routes;

12. vue-one\src\store

import { createStore } from 'vuex'

export default createStore({

state: {

},

getters: {

},

mutations: {

},

actions: {

},

modules: {

}

})

13. vue-one\src\styles\index.css

body {

background-color: #f5f5f5;

}

14. vue-one\src\views\AboutView.vue

<template>

<div class="about">

<h1>This is an about page</h1>

</div>

</template>

15. vue-one\src\views\HomeView.vue

<template>

<div class="home">

<img alt="Vue logo" src="../assets/logo.png">

<HelloWorld msg="Welcome to Your Vue.js App"/>

</div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

export default {

name: 'HomeView',

components: {

HelloWorld

}

}

</script>

康燕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue qiankun 2023（二）子项目one

history = null // 当子应用被卸载后我们将路由等全部清空。//端口要和main里面配置的入口一致。8. src 的文件内容 vue-one\src\main.js。// 把子应用打包成 umd 库格式。
复制链接

扫一扫