今天打算写项目,创建vue脚手架后,创建路由时,路由无法显示,折腾了半天,终于解决了,在此进行记录。
刚运行时控制台出现警告:
"export 'default' (imported as 'Vue') was not found in 'vue'
于是我进行搜索查询,找到了这篇博客
按照博客上的步骤进行操作,在运行npm uninstall -g @vue/cli
时,报了如下错误:
npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path C:\Program Files\nodejs\node_modules\@vue\.cli-q8qYe2I8
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\@vue\.cli-q8qYe2I8'
npm ERR! [Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_modules\@vue\.cli-q8qYe2I8'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'mkdir',
npm ERR! path: 'C:\\Program Files\\nodejs\\node_modules\\@vue\\.cli-q8qYe2I8'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Ailjx\AppData\Local\npm-cache\_logs\2021-07-20T10_46_15_175Z-debug.log
于是我又开始一顿搜索,结果试了好久没有解决,于是尝试百度翻译一下这是什么意思
看到翻译后真是一言难尽,这不就是没管理员权限吗(浪费几个小时,论英语的重要性)
于是以管理员运行cmd
这时突然又发现一个问题:我不会切换==cmd的路径!!!==
赶紧去找度娘!!!
发现:
输入:d: 切换到D盘
输入:cd 路径 切换到指定路径
ok后再重新按照上面找的那个博客进行:
卸载新的cli,安装3.0.4cli
进入编程软件 npm run serve启动
所有操作一气呵成
一看控制台发现。。。。。。。。。。
"export 'default' (imported as 'Vue') was not found in 'vue'
还是那个错误
这tm相当于什么都没解决。。。
控制台输入vue -V查看脚手架版本,确实是3.0.4没错啊
我尝试`npm install -g @vue/cli-init
` 拉取2.X版本的脚手架,结果还是不行
最后的最后我妥协了,我不用import Vue from 'vue'
了,我去找找createApp的用法!
经过又一曲折的过程我找到了正确的createApp用法:
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from "../views/Home";
const routes = [
{
path: '',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home,
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
运行后控制台又报:
"export 'createWebHashHistory' was not found in 'vue-router'
这时输入:
npm install vue-router@next --save
安装最新的vue-router就ok
因为目前我解决的仅是路由的问题,所以只用到了createApp的部分方法
这样下来路由地址是这样的:很完美!!!
http://localhost:8080/home
若把路由里的createWebHistory换成createHashWebHistory ,路由是这样子的:
http://localhost:8080/#/home
至此我的问题大致解决了,路由也终于正常显示了:
但我依旧还有一些问题:
1.为什么我上个项目cli版本号也是3.0.4,就可以用import Vue from 'vue'
,而这个项目就必须用import { createApp } from 'vue'
,是因为我安装脚手架时出现了什么问题吗?
在线求大佬解答
哎,一番折腾一天过去了,这一天仅仅干了个这。。。真无语,时代在进步,代码在更新,感觉自己知识体系漏洞百出,再不努力键盘都要抛弃我了啊!