提交 0d1fb64b 编写于 作者: N ninecents

10-创建导航及路由

上级 ee0017f7
## 安装依赖
```bash
npm i vue-router@4
npm i element-plus --save
npm i string-format
```
> - https://element-plus.gitee.io/zh-CN/guide/quickstart.html
> - https://blog.csdn.net/hjseo_seg/article/details/123321570
## element-plus
```js
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```
\ No newline at end of file
......@@ -22,7 +22,10 @@
"dependencies": {
"@electron-toolkit/preload": "^1.0.2",
"@electron-toolkit/utils": "^1.0.2",
"electron-updater": "^4.6.5"
"electron-updater": "^4.6.5",
"element-plus": "^2.2.19",
"string-format": "^2.0.0",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@electron-toolkit/tsconfig": "^1.0.1",
......@@ -44,4 +47,4 @@
"vue": "^3.2.41",
"vue-tsc": "^0.40.13"
}
}
\ No newline at end of file
}
<script setup lang="ts">
import Versions from './components/Versions.vue'
</script>
<template>
<Versions></Versions>
<svg class="hero-logo" viewBox="0 0 900 300">
<use xlink:href="./assets/icons.svg#electron" />
</svg>
<h2 class="hero-text">You've successfully created an Electron project with Vue and TypeScript</h2>
<p class="hero-tagline">Please try pressing <code>F12</code> to open the devTool</p>
<div class="links">
<div class="link-item">
<a target="_blank" href="https://evite.netlify.app">Documentation</a>
</div>
<div class="link-item link-dot"></div>
<div class="link-item">
<a target="_blank" href="https://github.com/alex8088/electron-vite">Getting Help</a>
</div>
<div class="link-item link-dot"></div>
<div class="link-item">
<a
target="_blank"
href="https://github.com/alex8088/quick-start/tree/master/packages/create-electron"
>
create-electron
</a>
</div>
</div>
<div class="features">
<div class="feature-item">
<article>
<h2 class="title">Configuring</h2>
<p class="detail">
Config with <span>electron.vite.config.ts</span> and refer to the
<a target="_blank" href="https://evite.netlify.app/config/">config guide</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">HMR</h2>
<p class="detail">
Edit <span>src/renderer</span> files to test HMR. See
<a target="_blank" href="https://evite.netlify.app/guide/hmr-in-renderer.html">docs</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Hot Reloading</h2>
<p class="detail">
Run <span>'electron-vite dev --watch'</span> to enable. See
<a target="_blank" href="https://evite.netlify.app/guide/hot-reloading.html">docs</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Debugging</h2>
<p class="detail">
Check out <span>.vscode/launch.json</span>. See
<a target="_blank" href="https://evite.netlify.app/guide/debugging.html">docs</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Source Code Protection</h2>
<p class="detail">
Supported via built-in plugin <span>bytecodePlugin</span>. See
<a target="_blank" href="https://evite.netlify.app/guide/source-code-protection.html">
docs
</a>
.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Packaging</h2>
<p class="detail">
Use
<a target="_blank" href="https://www.electron.build">electron-builder</a>
and pre-configured to pack your app.
</p>
</article>
</div>
<div id="app">
<el-container>
<el-aside class="elLeft">
<sidebar></sidebar>
</el-aside>
<el-main class="elMain">
<el-container>
<router-view />
</el-container>
</el-main>
</el-container>
</div>
</template>
<script>
import Sidebar from './views/Sidebar/index.vue'
export default {
name: 'App',
components: {
'sidebar': Sidebar
}
}
</script>
<style lang="less">
@import './assets/css/styles.less';
#app {
width: 100%;
height: 100%;
}
.elLeft {
width: 200px;
height: 100%;
min-height: 500px;
background-color: aquamarine;
}
.elMain {
width: auto;
height: 100%;
// background-color: pink;
}
</style>
......@@ -37,7 +37,7 @@ a:hover {
border-bottom: 1px solid;
}
#app {
.about {
flex: 1;
display: flex;
flex-direction: column;
......
import { createApp } from 'vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
createApp(App).mount('#app')
createApp(App)
.use(router)
.use(ElementPlus)
.mount('#app')
import {createRouter,createWebHistory} from 'vue-router'
import lilili from '../views/my_wechat/lilili.vue'
import accounts from '../views/my_wechat/accounts.vue'
import welcome from '../views/welcome/index.vue'
import About from '../views/About.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'welcome',
component: welcome
},
{
path: '/lilili',
name: 'lilili',
component: lilili
},
{
path: '/accounts',
name: 'accounts',
component: accounts
},
{
path: '/About',
component: About
}
]
})
export default router;
import fs from 'fs'
import path from 'path'
import format from 'string-format'
// const { get_g_default_config, save_ds_json } = require('@/../../../EZBlog/src/_mp/config.js')
Date.prototype.format = function(fmt){
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
}
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length))
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(
RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)))
}
}
return fmt
}
function my_mkdirSync(fn_dir) {
if (!fs.existsSync(fn_dir)) {
fs.mkdirSync(fn_dir)
}
}
function my_readFileSync(fn_dir, encoding='utf-8') {
var data = ''
if (fs.existsSync(fn_dir)) {
data = fs.readFileSync(fn_dir, encoding)
}
// console.log(data)
return data
}
/////////////////////////////////////////////////////////////////////////
// 备签路径(D:\_ALL\LIFE\Wechat\微信公众号-漫享\每日一签\备签s)
function get_path_bei_tai() {
return path.join(get_g_default_config().root_path_daily_sign, '备签s')
}
// 我的函数-路径相关
var my_funs_path = {
// 全局配置文件(为了方便进程间通信,统一一个文件存储基础数据)(D:\_ALL\LIFE\Wechat\微信公众号-漫享\每日一签\备签s\dongman_name.txt)
get_fn_dongman_name: function() {
var fn_dongman_name = path.join(get_path_bei_tai(), 'dongman_name.txt')
console.log(fn_dongman_name)
return fn_dongman_name
},
// 缓存html(D:\_ALL\LIFE\Wechat\微信公众号-漫享\每日一签\备签s\cache.html)
get_fn_cache_html: function() {
return path.join(get_path_bei_tai(), 'cache.html')
},
// 获取当前处理的动漫路径(D:\_ALL\LIFE\Wechat\微信公众号-漫享\每日一签\备签s\狐妖小红娘\)
get_dir_current_dongman: function() {
var dir_current_dongman = path.join(get_path_bei_tai(), my_get_dongman_name())
console.log('【get_dir_current_dongman()】', dir_current_dongman)
my_mkdirSync(dir_current_dongman)
return dir_current_dongman
},
}
function my_get_dongman_name() {
return my_readFileSync(my_funs_path.get_fn_dongman_name())
}
// 获取当前处理的动漫路径(D:\_ALL\LIFE\Wechat\微信公众号-漫享\每日一签\备签s\狐妖小红娘\名言通.md)
// my_js.my_funs_path.get_fn_myt()
my_funs_path.get_fn_myt = function() {
return path.join(my_funs_path.get_dir_current_dongman(), '名言通.md')
}
my_funs_path.get_fn_bk_lemma_summary = function() {
return path.join(my_funs_path.get_dir_current_dongman(), '百度百科-作品介绍.txt')
}
my_funs_path.get_fn_bk_juqing = function() {
return path.join(my_funs_path.get_dir_current_dongman(), '百度百科-剧情简介.txt')
}
my_funs_path.get_fn_all_cfg = function() {
return path.join(my_funs_path.get_dir_current_dongman(), 'all_cfg.json')
}
// 获取当前处理的动漫路径(D:\_ALL\LIFE\Wechat\微信公众号-漫享\每日一签\备签s\狐妖小红娘\名言通.md)
// my_js.my_funs_path.get_fn_myt()
my_funs_path.get_fn_myt_cache_html = function() {
return path.join(my_funs_path.get_dir_current_dongman(), '名言通.html')
}
my_funs_path.get_fn_bk_cache_html = function() {
return path.join(my_funs_path.get_dir_current_dongman(), '百度百科.html')
}
my_funs_path.get_fn_douban_cache_html = function() {
return path.join(my_funs_path.get_dir_current_dongman(), '豆瓣.html')
}
my_funs_path.get_fn_pic_heng = function() {
return path.join(my_funs_path.get_dir_current_dongman(), 'pic_heng.md')
}
my_funs_path.get_fn_pic_list = function() {
return path.join(my_funs_path.get_dir_current_dongman(), 'pic_list.md')
}
// 壁纸路径
my_funs_path.get_fn_screen_md = function() {
var fn = '精美壁纸 ! ' + my_get_dongman_name() + '.md'
return path.join(my_funs_path.get_dir_current_dongman(), fn)
}
// D:\_ALL\LIFE\Wechat\微信公众号-漫享\resource\mp_md_未发送文章
my_funs_path.get_path_mp_md_src = function() {
return get_g_default_config().root_path_mp_md_src
}
/////////////////////////////////////////////////////////////////////////
function my_parse_result_std_in(content) {
var tmp = content.split('>o< | -v- | >o<')[1]
return Buffer.from(tmp, 'base64').toString()
}
// 自定义的exec命令,并返回结果
// function my_execSync(command, decode=true) {
// var content = child_process.execSync(command, {encoding: 'utf-8'})
// if (decode) {
// return my_parse_result_std_in(content)
// } else {
// return content
// }
// }
/////////////////////////////////////////////////////////////////////////
var my_funs_wx = {
my_get_dongman_name: my_get_dongman_name,
get_all_cfg: function() {
var str_cfg = my_readFileSync(my_funs_path.get_fn_all_cfg())
var cfg = {}
if (str_cfg.length > 0) {
cfg = JSON.parse(str_cfg)
}
return cfg
},
save_db_mainpic: function(src) {
var cfg = this.get_all_cfg()
console.log(cfg)
cfg.db_mainpic = src
// this.write_all_cfg(cfg)
// JSON.stringify(cfg)
// fs.writeFileSync(my_funs_path.get_fn_all_cfg(), str_cfg)
},
// 保存当前页面源码到指定文件
my_save_myt_html_source: function(path_name=null) {
if (path_name == null) {
path_name = my_funs_path.get_fn_myt_cache_html()
}
console.log('【缓存路径】', path_name)
fs.writeFileSync(path_name, document.getElementsByTagName('html')[0].outerHTML)
},
my_save_bk_html_source: function(path_name=null) {
if (path_name == null) {
path_name = my_funs_path.get_fn_bk_cache_html()
}
console.log('【缓存路径】', path_name)
fs.writeFileSync(path_name, document.getElementsByTagName('html')[0].outerHTML)
},
my_save_douban_html_source: function(path_name=null) {
if (path_name == null) {
path_name = my_funs_path.get_fn_douban_cache_html()
}
console.log('【缓存路径】', path_name)
fs.writeFileSync(path_name, document.getElementsByTagName('html')[0].outerHTML)
},
my_save_pic_heng: function(pic_heng) {
pic_heng = format('![{0}]({0})\n\n', pic_heng)
var path_name = my_funs_path.get_fn_pic_heng()
console.log('【my_save_pic_heng路径】', path_name)
fs.writeFileSync(path_name, pic_heng)
},
my_save_pic_list: function(db_url_pics) {
var pics_screen = ''
for (let pic in db_url_pics) {
if(db_url_pics[pic]){
pics_screen += format('![{0}]({0})\n\n', db_url_pics[pic])
}
}
var path_name = my_funs_path.get_fn_pic_list()
console.log('【my_save_pic_list路径】', path_name)
fs.writeFileSync(path_name, pics_screen)
},
my_gen_screen_md: function(db_url_pics) {
var pics_screen = ''
for (let pic in db_url_pics) {
if(db_url_pics[pic]){
pics_screen += format('![{0}]({0})\n\n', db_url_pics[pic])
}
}
pics_screen = pics_screen.replace(/\\/g, '/')
var path_name = my_funs_path.get_fn_screen_md()
console.log('【my_gen_screen_md路径】', path_name)
fs.writeFileSync(path_name, pics_screen)
},
}
var write_all_cfg = function(cfg) {
// JSON.stringify(cfg)
// fs.writeFileSync(my_funs_path.get_fn_all_cfg(), str_cfg)
}
function setCookie(cname, cvalue, exdays) {
var d = new Date()
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
var expires = "expires="+d.toUTCString()
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"
}
function getCookie(cname) {
var name = cname + "="
var ca = document.cookie.split(';')
for(var i = 0; i < ca.length; i++) {
var c = ca[i]
while (c.charAt(0) == ' ') {
c = c.substring(1)
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length)
}
}
return ""
}
function checkCookie() {
var user = getCookie("username")
if (user != "") {
alert("Welcome again " + user)
} else {
user = prompt("Please enter your name:", "")
if (user != "" && user != null) {
setCookie("username", user, 365)
}
}
}
// 打开cmd
function my_open_cmd(cmd, options) {
const exec = require('child_process').exec
var _cmd = 'start cmd /k ' + cmd
console.log(_cmd, options)
exec(_cmd, options)
}
// 打开外链
function my_openExternal(link) {
const { shell } = require('electron')
console.log(link)
shell.openExternal(link)
// const exLinksBtn = document.getElementById('open-ex-links')
// exLinksBtn.addEventListener('click', (event) => {
// shell.openExternal('http://electron.atom.io')
// })
}
// 执行文件中的js
function my_execJsFile(fn, js) {
// eval(js)
}
// module.exports = {
export {
setCookie,
getCookie,
my_mkdirSync,
my_readFileSync,
// my_execSync,
my_open_cmd,
my_openExternal,
my_execJsFile,
my_funs_path,
my_funs_wx,
}
<template>
<div class="about">
<Versions></Versions>
<svg class="hero-logo" viewBox="0 0 900 300">
<use xlink:href="../assets/icons.svg#electron" />
</svg>
<h2 class="hero-text">You've successfully created an Electron project with Vue and TypeScript</h2>
<p class="hero-tagline">Please try pressing <code>F12</code> to open the devTool</p>
<div class="links">
<div class="link-item">
<a target="_blank" href="https://evite.netlify.app">Documentation</a>
</div>
<div class="link-item link-dot"></div>
<div class="link-item">
<a target="_blank" href="https://github.com/alex8088/electron-vite">Getting Help</a>
</div>
<div class="link-item link-dot"></div>
<div class="link-item">
<a
target="_blank"
href="https://github.com/alex8088/quick-start/tree/master/packages/create-electron"
>
create-electron
</a>
</div>
</div>
<div class="features">
<div class="feature-item">
<article>
<h2 class="title">Configuring</h2>
<p class="detail">
Config with <span>electron.vite.config.ts</span> and refer to the
<a target="_blank" href="https://evite.netlify.app/config/">config guide</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">HMR</h2>
<p class="detail">
Edit <span>src/renderer</span> files to test HMR. See
<a target="_blank" href="https://evite.netlify.app/guide/hmr-in-renderer.html">docs</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Hot Reloading</h2>
<p class="detail">
Run <span>'electron-vite dev --watch'</span> to enable. See
<a target="_blank" href="https://evite.netlify.app/guide/hot-reloading.html">docs</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Debugging</h2>
<p class="detail">
Check out <span>.vscode/launch.json</span>. See
<a target="_blank" href="https://evite.netlify.app/guide/debugging.html">docs</a>.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Source Code Protection</h2>
<p class="detail">
Supported via built-in plugin <span>bytecodePlugin</span>. See
<a target="_blank" href="https://evite.netlify.app/guide/source-code-protection.html">
docs
</a>
.
</p>
</article>
</div>
<div class="feature-item">
<article>
<h2 class="title">Packaging</h2>
<p class="detail">
Use
<a target="_blank" href="https://www.electron.build">electron-builder</a>
and pre-configured to pack your app.
</p>
</article>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import Versions from '../components/Versions.vue'
</script>
<style lang="less">
@import '../assets/css/styles.less';
</style>
<template>
<!-- <el-aside width="200px"> -->
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<el-radio-button :label="false">expand</el-radio-button>
<el-radio-button :label="true">collapse</el-radio-button>
</el-radio-group> -->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose"
>
<router-link to="/accounts">
<el-menu-item index="1">
<el-icon><icon-menu /></el-icon>
<template #title>账号管理</template>
</el-menu-item>
</router-link>
<router-link to="/lilili">
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<template #title>lilili</template>
</el-menu-item>
</router-link>
<router-link to="/About">
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<template #title>关于</template>
</el-menu-item>
</router-link>
</el-menu>
<!-- </el-aside> -->
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>
<style lang="less">
.el-menu-vertical-demo:not(.el-menu--collapse) {
// width: 200px;
// min-height: 400px;
}
</style>
<template>
<div>
accounts
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<!--
个人公众号的token信息
文章列表
选择文章、下载为HTML
转MD、展示
转HTML、发布
-->
<div class="app-container">
<!-- 公众号token -->
<div>
<el-select v-model="mp_value" placeholder="请选择">
<el-option
v-for="item in mps"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-switch
v-model="is_mp_token_validate"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<el-button type="primary" plain @click.native=mp_open() round>打开公众号</el-button>
<el-button type="primary" plain @click.native=mp_update_token() round>更新token</el-button>
</div>
<!-- 文章处理 -->
<div>
<el-input v-model="settings.root_article" placeholder=""></el-input>
<el-button type="primary" plain @click.native=mp_server() round>打开mp_server</el-button>
</div>
</div>
</template>
<script>
import { my_open_cmd } from '../../utils/my_index.js'
export default {
data() {
return {
settings: {
root_article: ''
},
// mp管理
mps: [],
mp_value: '',
is_mp_token_validate: false,
}
},
mounted() {
// 测试数据
let my = {"settings":{"title":"MyElectron百宝箱","showSettings":true,"tagsView":true,"fixedHeader":false,"sidebarLogo":false,"errorLog":"production","wechat_dirs":{"root_article":"D:\\_ALL\\LIFE\\Wechat\\文章发布\\"},"dirs":{"cwd":"J:\\_ALL\\CODE\\gitee\\constellations\\Gemini\\MyAndroidAssemble\\electronTools"},"wechat_mps":{"acg美女cosplay营地":{}}}}
this.settings.root_article = my.settings.wechat_dirs.root_article
for(let k in my.settings.wechat_mps) {
this.mps.push({
value: k,
label: k
})
this.mp_value = k;
}
},
methods: {
mp_server() {
var cmd = 'D:/Python/Python386/python.exe D:/_ALL/CODE/gitee/constellations/Capricorn/WeChat/mp_server/main.py '
my_open_cmd(cmd, {'cwd': 'D:/_ALL/CODE/gitee/constellations/Capricorn/WeChat/my_cmd'})
},
mp_open() {},
mp_update_token() {},
checkState() {
//
}
}
}
</script>
<template>
<h1>welcome...</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册