vite前端模块配置

【一】环境配置

【1】vue环境

1.傻瓜式安装node: 
官网下载：https://nodejs.org/zh-cn/

2.安装cnpm: 
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装vue最新脚手架: 
>: cnpm install -g @vue/cli

注：如果2、3步报错，清除缓存后重新走2、3步
>: npm cache clean --force

【2】vite+vue3环境

不指定名字创建：npm create vite@latest
配置npm镜像站：npm config set registry https://registry.npmmirror.com
查看镜像站：npm config get registry

【3】重构项目目录

"""
├── luffycity
	├── public/          			# 项目共有资源
		├── favicon.ico				# 站点图标
		└── index.html				# 主页
    ├── src/      					# 项目主应用，开发时的代码保存
    	├── assets/      			# 前台静态资源总目录
    		├── css/				# 自定义css样式
    			└── global.css		# 自定义全局样式
    		├── js/					# 自定义js样式
				└── settings.js		# 自定义配置文件
			└── img/				# 前台图片资源
		├── components/    			# 小组件目录
		├── views/  				# 页面组件目录
		├── App.vue	    			# 根组件
		├── main.js	    			# 入口脚本文件
		├── router    		
			└── index.js			# 路由脚本文件
		store	    		
			└── index.js			# 仓库脚本文件
    ├── vue.config.js	    		# 项目配置文件
    └── *.*							# 其他配置文件
"""

【二】创建项目

【1】新建项目

 npm create vite@latest
 npm install 
 npm run dev

【2】配置vue-router

【1】安装依赖包

npm install -S vue-router@4
npm install vue-router@4 --save

【2】配置vue-router

• main.js

import {createApp} from 'vue'
// css只要引入，全局都生效
import './style.css'
// 使用vue-router
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

• App.vue

<template>
  <router-view></router-view>
</template>

• router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';
import HomeView from "../views/HomeView.vue";



const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },

];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

export default router;

【三】配置项目

【1】axios

cnpm install axios

• main.js

import axios from "axios";
Vue.prototype.$axios = axios;

【2】elementui_plus

• elementui_plus

npm install element-plus --save

• main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
createApp(App).use(router).use(ElementPlus).mount('#app')

【3】cookies

cnpm install vue-cookies 

• main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

【4】settings.js

const BASE_URL = 'http://127.0.0.1:8000/api/v1/';
export default {
    banner: BASE_URL + 'home/banner/',
}

• main.js

import settings from './assets/js/settings'
const app = createApp(App)
app.config.globalProperties.$settings = settings

【5】去默认样式

• global.css

body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

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

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}

• main.js导入

import './assets/css/global.css'