三 Vue前端项目构建

Jumy_S

已于 2023-10-03 12:53:22 修改

阅读量146

点赞数

文章标签： vue.js

于 2023-09-27 13:19:53 首次发布

本文链接：https://blog.csdn.net/Jumy_S/article/details/133347557

版权

$三 V u e 前端项目构建$

1.创建进入项目
2.UI框架-element-plus
3.路由库-vue-router
4.http请求库-axios
5.全局变量仓库-vuex

1.创建进入项目

npm install vue-router@4 --save
npm install vuex@4.0.2 --save
npm install qs@6.10.1
npm install sass-loader@10.2.0 --save-dev
npm install node-sass@6 --save-dev
npm install element-plus@1.2.0-beta.3 --save
npm install vue-router  --save

在这里插入图片描述

cd .\my_vue_pro\

npm  run serve

在这里插入图片描述

2.UI框架-`element-plus`

官方教程：https://element-plus.org/zh-CN/guide/quickstart.html#%E5%AE%8C%E6%95%B4%E5%BC%95%E5%85%A5

npm install element-plus@1.2.0-beta.3 --save

在这里插入图片描述

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')

<template>
  <div class="hello">
    <el-button type="primary">Primary</el-button>
  </div>
</template>

<script>
export default {
   
  name: 'HelloWorld',
  props: {
   
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
   
  margin: 40px 0 0;
}
ul {
   
  list-style-type: none;
  padding: 0;
}
li {
   
  display: inline-block;
  margin: 0 10px;
}
a {
   
  color: #42b983;
}
</style>

在这里插入图片描述

3. 路由库-vue-router

npm install vue-router  --save

在这里插入图片描述

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>


export default {
   
  name: 'App',
}
</script>

<style>

</style>

FrameView.vue

容器控件–https://element-plus.org/zh-CN/component/container.html

<template>
<div class="frame">
  <el-container class="frame-container">
    <!-- 头部区域 -->
    <el-header class="header">
      <a href="/" class='brand'><strong>AI</strong>平台</a>
      <div class="header-content">
        <div class="greet">欢迎</div