node: 16版本 npm：8版本
一、创建
1. 以下代码：注意my-vue-app为即将创建项目的名字，可以自行更改
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue
2.安装依赖
npm install
3. 启动
npm run dev
4.安装volar
二、初始化
1、完善目录
在src中增加：
router/index.js：路由配置，router文件夹下建立一个index.js文件
store/index.js：状态管理。vuex配置。store文件夹下建立一个index.js文件
api/index.js：调用接口。
untils/index.js：工具。存放axios以及拦截器
views：页面。views文件夹
2、修改App.vue、main.js
将App.vue内容改为
<template>
<router-view/>
</template>
<script setup>
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
将 main.js内容修改为：
import { createApp } from 'vue'
import App from './App.vue'
let app = createApp()
app.mount('#app')
3、 路由配置与使用
路由的配置
安装
npm install vue-router@4
在router/index.js文件中修改为如下代码：
import{
createRouter,
createWebHashHistory,
createWebHistory,
}from "vue-router";
//定义一些路由
//每个路由需要定义一个组件，
const routes = [
// {path:"/",component:Home,name:"home"} //不带参
// {path:"/cart:id",component:()=>import("../views/cart.vue"),name:"cart"}
]
//穿件路由实例并传递“routes”配置
//可以在这里输入更多的配置
const router = createRouter({
//内部提供了history模式的实现，为了简单起见，我们这里使用hash模式
history:createWebHashHistory(),
routes, //`routes:routes`的缩写
})
export default router;
在main.js中全局配置路由：
import router from "./router/index"
app.use(router)
路由的使用
（1）组件上属性跳转
<router-link to="/"/>
(2)事件中使用路由跳转
import {useRoute,useRouter} from "vue-router"
const route = useRoute() //route是获取路由信息的
const router = useRouter() //router是进行路由跳转的
//不带参跳转
funtion toHome(){
router.push('/')
}
//带参跳转
funtion toCart(){
router.push({
name:'cart',
query:{
id:34
}
})
}
4、状态管理配置与使用
状态管理配置
（1）安装vuex4
npm install vuex@next --save
或
yarn add vuex@next --save
在 store/inde.js 中内容修改为,数据为例子，可以删除
import { createStore } from 'vuex'
// 创建一个新的 store 实例
const store = createStore({
state () {
return {
count: 0
}
},
//方法控制数据的改变
mutations: {
increment (state,data) {
state.count+=data
}
},
//计算属性
getters:{
//比如计算商品的总价
totalPrice(state){
return state.count*9.99
}
},
action:{
asyncAdd(store,data){
setTimeout(()=>{
store.commit("increment",data);
},1000)
}
}
})
export default store;
在main.js中配置
import store from "../store/index"
app.use(store)
store的使用
（1）页面中使用state和getters中的数据
<div>{{store.state.count}}</div>
<div>{{store.getters.totalPrice}}</div>
（2）页面script中使用方法
import {useStore} from "vuex"
const store = useStore();
//调用mutations中的方法(同步)
function add(){
store.commit("increment",2);
}
//调用 actions 中的方法（异步）
function add2(){
store.dispatch("asyncAdd",10)
}
5、ant desgin vue组件的导入与使用
安装
npm i --save ant-design-vue
注册（全局）
在 main.js中导入
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
app.use(Antd)
6、api配置与使用
安装axios
npm i axios
在 untils/index.js 或 直接在api/index.js中写入如下代码
import axios from "axios"
const request = axios.create({
//配置接口请求基准路径
baseURL = ""
//baseURL:"http://api.cpengx.cn/metashop/api",
});
//响应拦截器
request.interceptors.response.use(
//成功的时候执行
(rersponse)=>{
if(response.status == 200){
return response.data;
}else{
return response;
}
},
//请求失败的时候
function(error){
return Promise.reject(error);
}
);