1.用yarn来初始化项目
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
这样项目就创建好了 在浏览器输入localhost：3000 就能看见默认首页了
2.项目的目录结构
|-node_modules -- 项目依赖包的目录
|-public -- 项目公用文件
|--favicon.ico -- 网站地址栏前面的小图标
|-src -- 源文件目录，程序员主要工作的地方
|-assets -- 静态文件目录，图片图标，比如网站logo
|-components -- Vue3.x的自定义组件目录
|--App.vue -- 项目的根组件，单页应用都需要的
|--index.css -- 一般项目的通用CSS样式写在这里，main.js引入
|--main.js -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore -- git的管理配置文件，设置那些目录或文件不管理
|-- index.html -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误
|-- package.json -- 项目配置文件，包管理、项目名称、版本和命令
vite创建的项目结构很简洁，pack.json也非常简洁
{ "name": "demo2", "version": "0.0.0", "scripts": { "dev": "vite", "build": "vite build" }, "dependencies": { "vue": "^3.0.4" }, "devDependencies": { "vite": "^1.0.0-rc.13", "@vue/compiler-sfc": "^3.0.4" } }
3.安装常用插件
3.1使用sass,注意由于环境问题和版本问题
yarn add node-sass 会出现一下错误，
因为电脑里没有 Python环境，可以自己直接安装Python,一键安装即可，安装包自行百度下载。
2.第二种安装方法
yarn add -D sass 直接安装成功
3.2 使用router4.0
安装路由
npm install vue-router@4 -S
创建router/idnex.js
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: '/login',
redirect:'/login'
},
{
path: '/login',
name: 'Login',
component: () => import('../views/Login/index.vue')
},
{
path: '/home',
name: '首页',
component: () => import('../views/Home/index.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),//哈希模式
routes
})
export default route
// 页面使用
import { useRouter,useRoute } from 'vue-router';
const router = useRouter()
const onSubmit2 =()=>{
router.push({name:'首页',query:{role:'admin'}})
}
3.3 使用ElementPlus
安装element-plus
npm install element-plus --sav
推荐使用按需自动导入
1.npm install unplugin-vue-components
2.vite配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// const {resolve} =require('path')
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [ElementPlusResolver()],
}),
],
// alias:{
// '@':resolve(__dirname,'src')
// },
resolve:{
alias:{'@':path.resolve(__dirname,'src')}
},
server:{
port:8080,
open: true,
}
})
3.在main.js 中 引入 import 'element-plus/dist/index.css'
3.4 修改element-plus 默认语言配置
默认为英文，我们一般需要改成中文
main.js
import zhCn from 'element-plus/es/locale/lang/zh-cn'
createApp(App).use(router).use(ElementPlus, {locale: zhCn}).use(store).mount('#app')
3.5 别名配置
方式一
import path from 'path'
resolve:{
alias:{'@':path.resolve(__dirname,'src')}
},
方式二
const {resolve} =require('path')
alias:{
'@':resolve(__dirname,'src')
},
3.6 使用vuex4
安装vuex npm install vuex@4 -S
在src目录下添加store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
tabsList:[],
conTextTabs:''
},
mutations:{
//添加tab
addTabs(state,tab){
//如果有 就不添加
const isSome = state.tabsList.some(item=>{return item.path===tab.path})
if(!isSome){
const itemTab={
fullPath:tab.fullPath,
meta:tab.meta,
path:tab.path,
name:tab.name,
query:tab.query,
params:tab.params,
title:tab.meta.title
}
state.tabsList.push(itemTab)
}
},
//移除tab
removeTabs(state,tab){
const index = state.tabsList.findIndex((item,index)=>{
return item.path==tab.path
})
state.tabsList.splice(index,1)
},
},
getters:{},
actions:{},
modules:{}
})
3.7 使用pinia，pinia持久化插件pinia-plugin-persist
安装
$ npm install pinia
在src目录下创建pinia文件夹并创建index.js
import { defineStore } from 'pinia'
export const useStore = defineStore('user2', {
state: () => {
return {
name: '张三',
content: 1,
list: [1, 2, 3]
}
},
getters: {
getAdd: (state) => {
return state.content + 200
}
},
actions: {
changeName(name) {
this.name = name
}
},
//持久化配置
persist: {
enabled: true,
strategies: [
{
//key的名称
key: 'pinia',
//更改默认存储，我更改为localStorage
storage: localStorage,
paths: ['name', 'content'] // 可以选择哪些进入local存储，默认是全部进去存储
}
]
}
})
在组件中使用
<p>name:{{store.name }}</p>
<p>content:{{ store.content }}</p>
import { useStore } from "../../../pinia/index";
const store = useStore();
const test = () => {
store.content++;
};
使用结构的方式 这种是响应式的（推荐）
<p>{{ content }}</p>
<p>{{store.getAdd}}</p>
<button @click="add()">父按钮</button>
import { useStore } from "../../../pinia/index";
import { storeToRefs } from "pinia"; //
const store = useStore();
const { content } = storeToRefs(store);
const add = () => {
store.content++;
};
持久化配置 在pinia下在创建一个store.js文件 ，并在main.js中使用 当然也可以不用单独抽出来直接放到main.js中
import { createPinia } from 'pinia'
// 引入持久化插件
// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
// 使用该插件
pinia.use(piniaPersist)
//导出
export default pinia
最后在main.js中引用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index' //vuex
import pinia from './pinia/store.js' //pinia
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import './assets/css/index.css'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementPlus, { locale: zhCn }).use(store).use(pinia).mount('#app'
3.8 使用vite-plugin-svg-icons在项目中用svg图标
1. 安装 npm install vite-plugin-svg-icons --save-dev
2. 在vite.config.js 中引入配置
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'public/img/svg')],
// 指定symbolId格式
symbolId: 'icon-[name]',
}),
3.在main.js 中引入
import 'virtual:svg-icons-register'
4.在组件中使用 tip 是 public/img/svg文件夹下的svg文件名
<svg aria-hidden="true" style="width: 50px; height: 50px">
<use :href="`#icon-tip`" rel="external nofollow" />
</svg>
