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

2022-09-06 12:30:09 阅读：238 来源： 互联网

标签：初始化 vue import app js vite vue3 router store

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9