vue 项目创建

不学习何以强国

已于 2024-01-27 20:03:50 修改

阅读量423

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-01-27 19:17:49 首次发布

本文链接：https://blog.csdn.net/m0_52240489/article/details/135886895

版权

本文介绍了如何使用Vue.js和Vue3框架创建项目，包括配置npm镜像、安装ElementPlusUI库、构建基础布局以及集成Axios进行HTTP请求。还提供了处理npm创建项目时可能遇到的问题的解决方案。

摘要由CSDN通过智能技术生成

创建vue项目

直接使用以下命令进行创建即可。详细的使用说明查看官网即可。

 npm create vue@latest

在使用 npm create vue@latest 执行命令之后有可能会遇到一直没有反应，随后报错的问题。（我使用的镜像是淘宝的）

解决：
1、查看npm代理

npm config get registry

2、更换npm镜像

npm config set registry=https://registry.npmmirror.com

使用 element plus

安装

使用官网提供的安装指令即可安装。

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

搭建基础布局

1、删除 components 文件夹下多余的多余页面（可以不删）。

2、挑选适合自己的布局方式，在element里面的container挑选合适的布局。

3、在App.vue中引入布局组件。注意样式不要遗落。

<script setup>
import { RouterView } from 'vue-router'
import Aside from '@/components/Aside.vue'

</script>

<template>
  <div>
    <el-container>
      <el-aside>
        <Aside></Aside>
      </el-aside>
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>


<style scoped>
.el-header {
  position: relative;
  width: 100%;
  height: 60px;
}

.el-aside {
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
  bottom: 0;
}

.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}
</style>

Aside.vue

<template>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">expand</el-radio-button>
      <el-radio-button :label="true">collapse</el-radio-button>
    </el-radio-group>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      :router="true"
    >
      <!-- 二级菜单 -->
      <el-menu-item index="1" route="/">
        <el-icon><icon-menu /></el-icon>
        <template #title>首页</template>
      </el-menu-item>
        <!-- 二级菜单 -->
      <el-menu-item index="2" route="/about">
        <el-icon><icon-menu /></el-icon>
        <template #title>yem</template>
      </el-menu-item>
    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  
  const isCollapse = ref(true)
  const handleOpen = (key: any, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>
  
  <style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  </style>

引入 axios

Axios中文文档 | Axios中文网 (axios-http.cn)https://www.axios-http.cn/

import './assets/main.css'
import 'element-plus/dist/index.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import axios from 'axios'
import VueAxios from 'vue-axios'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

//use：将第三方模块 注入到Vue实例对象中的方法
app.use(ElementPlus)
app.use(VueAxios, axios)
app.mount('#app')