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
相关文章
|
28天前
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
28 1
怎么在vite项目中全局导入一个scss文件
|
5月前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
75 1
|
7月前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
53 0
|
7月前
|
资源调度
vue.config常用配置项、自动导入依赖项
vue.config常用配置项、自动导入依赖项
175 0
|
JavaScript
vue3新建的项目如何配置
vue3新建的项目如何配置
56 0
【vite】vite项目配置src目录路径别名
【vite】vite项目配置src目录路径别名
680 0
|
JavaScript 前端开发
vue3项目创建步骤,以及项目运行失败的原因和解决方法
vue3项目创建步骤,以及项目运行失败的原因和解决方法
863 0
|
存储 JSON C++
VS配置新项目
VS配置新项目
|
缓存 JavaScript 前端开发
Vue 新增不参与打包的接口地址配置文件
Vue 新增不参与打包的接口地址配置文件
218 0

热门文章

最新文章