Vue、VueCLI（脚手架）安装、使用详细步骤

最新推荐文章于 2022-10-12 09:57:28 发布

原创最新推荐文章于 2022-10-12 09:57:28 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详述了Vue的安装和VueCLI的使用步骤，特别强调了如何在main.js中导入ElementUI。此外，推荐了一个名为'花裤衩'的大佬在Gitee上的半成品框架资源——vue-element-admin，该框架可直接克隆使用。组件创建与使用部分包括创建header.vue组件，配置router文件夹的index.js以及在组件中引入import。

配置：在main.js导入ElementUI

import ElementUI from 'element-ui'
Vue.use(ElementUI)

推荐一个大佬的gitee：花裤衩，里面有半成品框架

半成品框架（可克隆下来直接使用）：

https://gitee.com/panjiachen/vue-element-admin.git

组件的使用：

1. 创建组件：header.vue

一般放在views文件夹里，可以放component文件夹，或者自己创建

<template>
  <div></div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
</style>

2.配置

router文件夹的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)

const routes = [
    //添加{}里的内容
  {
    path: '/head',
    name: 'Head',
    meta: {
      scrollToTop: true
    },
    component: () => import('../views/head.vue')
  },
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.使用组件：

在script标签里，在export default语句的前面添加import导入

<template>
  <div></div>
</template>
<script>

//import 组件名字 from "组件地址";
import head from "./components/head.vue";

export default {
    //使用
    components: { head },
}
</script>
<style scoped>
</style>