vue cli 环境搭建

1:设置华为云 npm 源路径: npm config set registry https://mirrors.huaweicloud.com/repository/npm/

2:查看源: npm config get registry

3: npm install -g @vue/cli 安装vue cli 客户端

4:查看vue cli 版本 vue --version vue -V

5:vue ui 查看 项目创建页面

vue3+ ts 使用vuecli 创建项目启动报错 ERROR in src/router/index.ts:1:64

TS7016: Could not find a declaration file for module 'vue-router'. './node_modules/vue-router/index.js' implicitly has an 'any' type.

Try npm i --save-dev @types/vue-router if it exists or add a new declaration (.d.ts) file containing declare module 'vue-router';

> 1 | import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

| ^^^^^^^^^^^^

2 | import HomeView from "../views/HomeView.vue";

解决办法

1:在src 下 新建 shims-vue.d.ts

2:在router 下的 index.ts 中添加 type RouteRecordRaw = typeof RouteRecordRaw; 这个一句代码到 const routes: Array<RouteRecordRaw> 之前

=================================

6:安装 axios前后端交互工具 npm install -g axios

7: vue2 安装使用elementui

npm install -g element-ui

修改main.js

import Vue from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

//引入样式

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;

//使用ElementUI

Vue.use(ElementUI);

new Vue({

router,

store,

render: (h) => h(App),

}).$mount("#app");

8:vue3 安装 element-plus

npm install -g element-plus

修复 "Cannot find module 'element-plus' or its corresponding type declarations" 错误

如果使用 TypeScript,需要添加类型声明:

对于 Vue 3 + Element Plus:

// 在 tsconfig.json 中

{

"compilerOptions": {

"types": "element-plus/global"

}

}

或在 shims-vue.d.ts 中添加:

// shims-vue.d.ts

declare module 'element-plus' {

import { Plugin } from 'vue'

const ElementPlus: Plugin

export default ElementPlus

}

对于 Vue 2 + Element UI:

npm install @types/element-ui

相关推荐
小蜜蜂dry5 小时前
nestjs实战-权限二:角色模块
前端·后端·nestjs
rm1095 小时前
【js逆向】webpack自吐算法记录
javascript
AskHarries5 小时前
权限模型:Shell、Browser、文件读写的安全边界
服务器·前端·网络
小蜜蜂dry5 小时前
nestjs实战-权限一: 菜单模块
前端·后端·nestjs
用户5812441541575 小时前
GemDesign MCP协议详解:从原型到代码的完整技术链路
前端
半个烧饼不加肉6 小时前
JS 底层探究-- 事件循环
开发语言·前端·javascript
goDeep6 小时前
useMemo 和 useCallback 的区别,我终于搞懂了
前端
小亮学前端6 小时前
在1Panel中部署Nuxt项目
前端·vue.js
产品研究员6 小时前
AI生成可用的React交互代码实测:Lovable vs Stitch vs Paico
前端·react.js·aigc
labixiong6 小时前
Prompt 工程:当一段文字学会了思考、行动与统治
前端·ai编程