vite创建新项目-常见配置信息

简介: vite创建新项目-常见配置信息

创建项目


pnpm create vite

安装依赖

pnpm install

引入avue组件

import {createApp} from 'vue';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
const app =createApp({});
app.use(Avue);

配置别名

import path from 'path'

  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, 'src')
    },
  },

配置运行端口 和代理

  server: {
    port: 9527,
    host: '0.0.0.0',
    open: true,
    proxy: { // 代理配置
      '/dev': ''
    },
  },

安装elementplus

pnpm install element-plus

安装axios

pnpm install axios

安装路由

yarn add vue-router@4

配置路由

import { createRouter, createWebHashHistory } from 'vue-router'


import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout/index.vue'
import N01 from './modules/N01'
import N02 from './modules/N02'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'Dashboard',
            component: Layout,
            redirect: '/dashboard',
            meta: {
                title: '主页'
            },
            children: [
                {
                    path: 'dashboard',
                    name: 'Dashboard',
                    component: () => import('@/views/dashboard/index.vue'),
                    meta: {
                        title: '主页',
                        icon: 'folder',
                        noCache: true,
                        affix: true
                    }
                }
            ]
        },
        ...N01,
        ...N02,
        {
            path: '/login',
            name: 'Login',
            component: () => import('@/views/login/index.vue'),
            meta: {
                hidden: true,
                title: '登录'
            }
        },
        {
            path: '/external-link',
            name: 'ExternalLink',
            component: Layout,
            meta: { title: '外链', icon: 'folder' },
            children: [
                {
                    path: 'https://element-plus.org',
                    name: 'ElementPlus',
                    meta: { title: '外链' }
                }
            ]
        },
        {
            path: '/:pathMatch(.*)',
            redirect: '/404',
            name: 'Redirect404',
            meta: {
                title: '404',
                hidden: true
            }
        }
    ]
})

export default router

安装 vuex

yarn add vuex@next --save

安装sass

yarn add sass
相关文章
|
2月前
|
JavaScript API 项目管理
Nuxt Kit 组件管理:注册与自动导入
【9月更文挑战第16天】Nuxt Kit 的组件管理功能包括全局和局部注册,简化了组件引入流程。全局注册允许在 `nuxt.config.js` 中配置,局部注册则在单个组件中导入并注册。自动导入功能通过插件如 `unplugin-vue-components` 实现,根据目录结构和命名规范自动识别和导入组件,提升开发效率和代码可维护性,尤其适用于大型项目。这一机制让组件管理更加便捷高效。
|
6月前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
47 0
|
6月前
|
资源调度
vue.config常用配置项、自动导入依赖项
vue.config常用配置项、自动导入依赖项
157 0
|
11月前
|
JavaScript 小程序
VUE3(三十五)vite构建的项目配置使用.env文件
VUE3(三十五)vite构建的项目配置使用.env文件如标题所示:我要在vue3项目使用.env文件。 先介绍一下项目背景,项目使用VUE3.2 + vite2.9 + typescript搭建。 我基本断定,vue3使用.env文件的方法可能和vue2使用.env文件的方法可能是不同,关于vue2项目如何使用.env文件,请移步《VUE2(七)VUE配置env文件使用》
383 1
|
JavaScript
vue3新建的项目如何配置
vue3新建的项目如何配置
50 0
|
JavaScript 前端开发
vue-cli 工程目录结构详介绍
vue-cli 工程目录结构详介绍
118 0
|
存储 JSON C++
VS配置新项目
VS配置新项目
|
缓存 JavaScript 前端开发
Vue 新增不参与打包的接口地址配置文件
Vue 新增不参与打包的接口地址配置文件
215 0
|
JavaScript 安全 前端开发
vue打包以后,如何配置文件修改全局接口地址
vue打包以后,如何配置文件修改全局接口地址
vue打包以后,如何配置文件修改全局接口地址