您的位置:首页 - 文章 - Vue - 正文

Vue-Cli脚手架文件main.js、App.vue、index.html、index.js详解

使用到vue项目的文件包括一个.html,两个.js,两个.vue文件,关系如上图所示

1、index.xml为vue项目默认首页,里面默认引用了app.vue根组件

2、main.js为vue项目的入口文件,加载了各种公共组件(需要引用和初始化组件实例)。比如app.vue

main.js中引入相关资源文件

引入Vue实际完整写法是   import Vue from "../node_modules/vue/dist/vue.js,即从node_modules中加载相应名称的模块

import App from './App'就是引入同目录层次下的App.vue文件

import router from './router',引入路由文件

初始化组件实例

其中new Vue的参数,解释如下:

el:官方解释为实例提供挂载的元素。此处为index.html中的<div id="app"><div>。
router:为router:router,的简写,指向引入文件中的routes:[]
components:注册哪些组件,需在顶部引入文件。
template:替换挂载元素的模板组件,而挂载元素的内容都将被忽略。即用template替换index.html里面的<div id="app"></div>

问题一、用vue 3 使用Vue.use() 报错,是因为新版的vue3 不在支持这种写法,正确的写法挂载 ElementUI

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
createApp(App)
.use(router)
.use(ElementUI)
.mount("#app");

问题二,原因是vue3 不兼容Element , 应该用 element-plus

卸载:npm uninstall element-ui

安装:vue add element-plus   或 npm install element-plus --save

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from 'element-plus' // 引入element-plus
import 'element-plus/theme-chalk/index.css' // 引入element-plus的样式
createApp(App)
.use(router)
.use(ElementPlus, { zIndex: 3000, size: 'small' }) // 使用element-plus
.mount("#app");

 

按需引入

安装 babel-plugin-import:

npm install babel-plugin

问题三:errors and 0 warnings potentially fixable with the `--fix` option

与创建项目 eslint 设置有问题,可以通过“—fix”选项修复

改为:

"lint": "eslint --fix --ext .js,.vue src",

 

 

本文原创,作者:西决,其版权均为品创网络所有。如需转载,请注明出处:https://www.sxpcwlkj.com/vuecli05/

发表评论