vscode创建vue+ElementUI项目

vscode创建vue+ElementUI项目 2023-07-08 757

一、初步创建vue项目，运行

参考：

二、创建配置router路由信息

1. 执行命：npm install vue-router@3.5.2 进行安装。这里安装3.5.2的版本，如果不小心执行了安装了最新版本4.x.x，可使用 npm uninstall vue-router -S卸载最新版本。最新版本可能导致配置路由的时候出现export default (imported as VueRouter) was not found in vue-router ....的错误。

2. 在src下创建一个router文件夹，并创建 index.js，并导入默认的HolloWorld页面，配置为默认访问路径

import Vue from "vue"; import VueRouter from vue-router import HelloWord from "../components/HelloWorld.vue"; // 使用路由 Vue.use(VueRouter); // 创建VueRouter的实例 const router = new VueRouter({ mode:history, routes: [ { path: "/", name:home, component: HelloWord, } ] }) // 导入路由实例 export default router

3.修改main.js，把router对象注册到vue中。

import Vue from vue import App from ./App.vue // 引入导出的路由 import router from ./router/index Vue.config.productionTip = false new Vue({ // 注册路由 router, render: h => h(App), }).$mount(#app)

4.修改App.vue页面

<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: App } </script>

5.访问项目正常打开

三、创建新的访问测试页面Index

1. 在components文件下创建Index.vue页面，后续其他公共组件也同样添加在该components目录下，如：自定义的翻页组件、弹窗组件、Echarts组件等。如果报错 error Component name "Index" should always be multi-word vue/multi-word-component-names，只需在.eslintrc.js文件中添加如下代码即可

// 关闭组件命名规则 "vue/multi-word-component-names":"off"

Index.vue

<template> <div>版本号：{ {version}}</div> </template> <script> export default { name: Index, data () { return { // 版本号 version: 3.3.0 } }, methods: { goTarget (href) { window.open(href, _blank) } } } </script>

2. 在router下的index.js添加路由

3. 访问测试

四、引入ElementUI框架

1.在终端执行指令：npm i element-ui -S 或 npm install element-ui --save

2. 在main.js中引入