vue3项目的创建与初始化（vite）

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);
	}
);

标签：初始化,vue,import,app,js,vite,vue3,router,store
来源： https://www.cnblogs.com/huangchun/p/16661364.html