vue2建议的 构建工具 webpack + 脚手架 @vue/cli 运行项目 npm run serve
vue3建议的 构建工具 vite + 脚手架 create-vue 运行项目 npm run dev
----------- 使用vite搭框架(没有router和pinia) --------------
1, 全局安装vite构建工具
cnpm i create-vite -g / yarn add create-vite -g
2, 使用vite构建vue项目
npm init vite@latest
3, 安装默认依赖 (cd进入项目根目录)
cnpm i
4, 运行项目
npm run dev
----------- 使用create-vue搭框架(可选router和pinia) --------------
1, 全局安装create-vue脚手架
cnpm i create-vue -g / yarn add create-vue -g
2, 使用create-vue构建vue项目
npm init vue@latest
3, 安装默认依赖 (cd进入项目根目录)
cnpm i
4, 运行项目
npm run dev
注意: create-vue 要求nodejs版本在v16及以上 ,否则运行报错
----------- 配置代理 （联想） -------------
一、需要现在根目录下创建jsconfig.json文件，并配置
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
二、需要在vite.config.js中配置
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
base: "./",
server: {
host: "localhost",
open: true,
port: 8080,
proxy: {
"/myDouyu": {
target: "http://open.douyucdn.cn",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/myDouyu/, '')
}
}
}
})
------------ 配路由 --------------
1, 安装路由
cnpm i vue-router / yarn add vue-router
2, 创建路由文件 @/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/home.vue')
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
export default router
3, main.js中导入挂载路由
import router from './router'
createApp(App).use(router).mount('#app')
4, 在App.vue中管理路由
<router-view/>
------------ 状态管理pinia ---------
1, 安装pinia
cnpm i pinia / yarn add pinia
2, 在main.js中导入pinia并挂载
import { createPinia } from "pinia";
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')
3, 创建状态管理仓库文件 @/store/index.js
import { defineStore } from "pinia";
export const useStore = defineStore("users", {
state: () => {
return {
name: 'luoluo'
}
}
})
4, 在组建中导入仓库
import { useStore } from "./store/index.js";
5, 读取仓库中的数据
const store = useStore()
{{store.name}}
// 或者 按需导入
import { storeToRefs } from "pinia";
const {name} = storeToRefs(store)
{{name}}
6, 修改仓库的数据
const store = useStore()
store.name = '无法议案'
// 或者一次修改多个值
store.$patch(state=>{
state.name = '物业覅按',
state.age = 30
})
7, 重置仓库, 还原为 初始值
store.$reset()
8, getters 状态属性的配置与读取
getters: {
newName(state){
return state.name+1
}
}
{{store.newName}}
9, actions 函数的定义与调用
actions: {
setName(data){
this.name = data
}
}
store.setName("fanfan")
------------ 预处理器 Sass ----------
1, 安装sass
cnpm i sass sass-loader / yarn add sass sass-loader
2, 在style中使用sass语法
<style scoped lang="scss">
------------ 组件库element-plus ----------
1, 安装 element-plus
cnpm i element-plus / yarn add element-plus
cnpm i @element-plus/icons-vue
2, 在main.js中引入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
mport * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn"
createApp(App).use(ElementPlus, {locale: zhCn}).mount('#app')
