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
相关文章
|
6月前
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
384 1
怎么在vite项目中全局导入一个scss文件
|
8月前
|
JavaScript API 项目管理
Nuxt Kit 组件管理:注册与自动导入
【9月更文挑战第16天】Nuxt Kit 的组件管理功能包括全局和局部注册,简化了组件引入流程。全局注册允许在 `nuxt.config.js` 中配置,局部注册则在单个组件中导入并注册。自动导入功能通过插件如 `unplugin-vue-components` 实现,根据目录结构和命名规范自动识别和导入组件,提升开发效率和代码可维护性,尤其适用于大型项目。这一机制让组件管理更加便捷高效。
111 4
|
10月前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
160 1
|
10月前
|
JSON Go API
go项目实现通过配置文件进行配置项统一管理
go项目实现通过配置文件进行配置项统一管理
82 0
|
10月前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
81 0
|
资源调度
vue.config常用配置项、自动导入依赖项
vue.config常用配置项、自动导入依赖项
244 0
|
JavaScript
vue3新建的项目如何配置
vue3新建的项目如何配置
79 0
|
存储 JSON C++
VS配置新项目
VS配置新项目
113 0
|
缓存 JavaScript 前端开发
Vue 新增不参与打包的接口地址配置文件
Vue 新增不参与打包的接口地址配置文件
246 0
OSZAR »