⁸

快速启动vue项目（自用）

星际背包客

2024-12-30 20:57

阅读420

星际背包客

2024-12-30 20:57

阅读 420

快速创建一个vue项目

1.用webStorm创建一个默认的vue项目并安装依赖或者利用vite创建一个vue项目

2.打开vite.config.js文件中删除vueDevTools(),这个工具

3.打开终端安装所需要的项目依赖例如：

axios(网络请求依赖)，pinia(状态管理依赖)，element-plus(UI框架依赖)或者antDesign-vue(UI框架依赖) vue-router(路由依赖) 这些基本依赖

axios:

▼
text
复制代码
npm install axios

pinia:

▼
text
复制代码
npm install pinia

element-plus:(和下面的antDesign-vue可以二选一，也可以一起选)

Overview 组件总览 | Element Plus

▼
text
复制代码
npm install element-plus --save

antDesige-vue:

组件总览 - Ant Design Vue

▼
text
复制代码
npm i --save ant-design-vue@4.x

vue-router：

▼
text
复制代码
npm install vue-router@4

pinia-plugin-persistedstate:(用于pinia开启持久化存储)

▼
text
复制代码
npm install pinia-plugin-persistedstate

4.安装项目开发依赖项（插件）例如：

unplugin-auto-import，unplugin-vue-components（VUE自动导入的开发依赖项可以将自动导入并且应用于全局而不是某一个文件中）

▼
text
复制代码
npm install -D unplugin-vue-components unplugin-auto-import

5.配置vite.concig.js文件

如果安装了自动配置插件和elementplus，需要在vite.concig.js中进行配置顺便配置服务路由

▼
js
复制代码
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";


plugins: [
    vue(),
    // 配置插件
    AutoImport({
      imports:["vue","vue-router","pinia"],   //加入这句以后每个vue里都不需要再用import来导入
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({importStyle:'sass'})],
    }),
  ]


//和plugins，resolve等同级
server:{
   host:'0.0.0.0',
           port:5713,
           proxy:{
      '/api':{
         target:'http://localhost:8080',
                 ws: true,
                 changeOrigin:true,
                 rewrite:path => path.replace(/^\/api/,'')
      }
   }
}

这里要在终端安装一个sass支持库，因为配置的时候配置了自动引入sass

▼
text
复制代码
npm install -D sass-embedded

6.重构各个文件

创建文件夹以及文件

1.配置router路由

创建router文件夹，里面创建Index.js文件

放入下列代码：

▼
js
复制代码
import {createRouter, createWebHistory} from "vue-router";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        //这里放入路由，例如：
        {
            path:'/',
            component: import('../Layout/BasicLayout.vue')
        }

    ]
})

export default router;

2.重新配置全局样式

先将下面的图片放在assets/images目录下命名为404

1.创建styles文件夹，里面创建common.css文件

写入下面的代码：

▼
css
复制代码
* {
  box-sizing: border-box;
  font-size: 15px;
}

html {
  font-size: 14px;
}

body {
  height: 100%;
  color: #333;
  min-width: 1240px;
  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
    'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
    sans-serif;
}

body, ul, h1, h3, h4, p, dl, dd {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #333;
  outline: none;
}

i {
  font-style: normal;
}

input[type='text'], input[type='search'], input[type='password'], input[type='checkbox'] {
  padding: 0;
  outline: none;
  border: none;
  -webkit-appearance: none;
}

input[type='text']::placeholder, input[type='search']::placeholder, input[type='password']::placeholder, input[type='checkbox']::placeholder {
  color: #ccc;
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  background: #ebebeb url('@/assets/images/404.jpg') no-repeat center / contain;
}

ul {
  list-style: none;
}

#app {
  background: #f5f5f5;
  user-select: none;
}

.container {
  width: 1300px;
  margin: 0 auto;
  position: relative;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis-2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix:after {
  content: '.';
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}

.el-breadcrumb__inner.is-link {
  font-weight: 400 !important;
}

2.在main.js中引入这个文件

▼
js
复制代码
import './styles/common.css'

3.创建stores文件夹

里面创建xxxStore.js文件，用于处理请求获得的信息

4.创建utils文件夹

用于存放工具类

5.创建apis文件夹

用于存放请求的api

6.创建Layout文件夹

放网站基础页面

7.创建views文件夹

放网站路由页面

更改已有文件

1.index.html文件

▼
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Vite App</title>
</head>
<body>
<div id="app" style="width: 100%;height: 100%"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2.main.js文件

▼
js
复制代码
import './styles/common.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia();
app.use(pinia)
pinia.use(piniaPluginPersistedstate)//可选（就是开启pinia的持久化存储到浏览器）
app.use(router)


app.mount('#app')

3.App.vue文件

▼
vue
复制代码
<script setup>

</script>

<template>
<h1>测试，这是首页</h1>
  <RouterView/>

</template>

<style scoped>

</style>

7.基本的布局

在layout文件夹下创建BasicLayout.vue文件

代码如下：

▼
vue
复制代码
<script setup>

</script>

<template>

  <div class="basicLayout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer class="footer">这里放版权信息</el-footer>
    </el-container>
  </div>


</template>

<style scoped>
.basicLayout .footer {
  background-color: #efefef;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: black;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

</style>

然后在App.vue文件中引入该路由即可

问答助学