vue3+vant+vue-router+axios+pinia+vite框架搭建

  • vue3+vant+vue-router+axios+pinia+vite框架搭建已关闭评论
  • 172 次浏览
  • A+
所属分类:Web前端
摘要

vue3的官网地址:https://cn.vuejs.org/;这里要说一下,vue3不支持IE11,如果要兼容IE11及其一下,不建议 使用vue3。

vue3的官网地址:https://cn.vuejs.org/

这里要说一下,vue3不支持IE11,如果要兼容IE11及其一下,不建议使用vue3。

创建vue脚手架,如果你需要使用ts,则需要node版本>=16。

本文按照大于16的node版本来搭建一个vue3的脚手架。

第一步:

> npm init vue@latest

  如果想创建指定版本,则使用  npm init vue@指定版本;“>”不要带上;

  运行之后,会让你填写项目名称和选择你需要的插件,如下图

  vue3+vant+vue-router+axios+pinia+vite框架搭建

 

  用空格键切换No/Yes;

  Projiect name:项目名称;

  Package name: package.json里面name属性的名称;  

  Add TypeScript:是否添加ts,本文选择Yes;如果不需要ts,可以选择No;

  Add JSX Support:是否支持JSX语法;

  Add Vue Router ......:是否添加vue-router;
  Add Pinia for state management;是否添加Pinia,Pinia是一个状态管理的插件,和vuex类似,vue3推荐使用Pinia,而不再维护vuex;

  Add Vitest for Unit Testing:是否添加单元测试;

  Add Cypress for both Unit and End-to-End testing:是否添加单元测试和端对端测试;

  Add ESLint for code quality:是否添加ESLint;

  Add Prettier for code formatting:是否添加Prettier格式化代码;

  选择完上述步骤之后,项目就会被创建并下载下来了。

第二步:安装并运行

  进入项目

> cd vueCli3

 

  安装依赖

> npm install

  启动服务

> npm run dev

 

vue3+vant+vue-router+axios+pinia+vite框架搭建

   服务启动之后,如果出现一个地址,说明你的服务已经开启成功了,直接点击地址,浏览器会打开脚手架的默认页面。

第三步:安装axios

  axios是一个基于promise的网络请求库,和ajax类似,但是要比ajax强大,可以在node.js和浏览器中使用。

  退出服务,安装axios

> npm install axios

第四步:安装vant

  vant的官网地址:https://youzan.github.io/vant/#/zh-CN/home

  Vant 是一个移动端组件库,目前支持ts,支持vue3;

npm i vant

  在main.ts中引入vant的样式,注册组件

import { createApp } from 'vue' import { createPinia } from 'pinia'  import App from './App.vue' import router from './router'  import './assets/main.css'  // 1. 引入你需要的组件 import { Button } from 'vant'; // 2. 引入组件样式 import 'vant/lib/index.css';  const app = createApp(App)  app.use(createPinia()) app.use(router) // 3. 注册你需要的组件 app.use(Button);  app.mount('#app')

 

在页面上使用组件:
<van-button type="primary">主要按钮</van-button> 

 重启服务,页面上就会出现按钮

vue3+vant+vue-router+axios+pinia+vite框架搭建

 

 这样一个框架就会被搭建完成。