使用 create-vue 脚手架工具创建一个基于 Vite 的 vue3 项目,并包含加入 Vue Router 等可选项

7 篇文章 0 订阅

在这里插入图片描述

如果你打算启动一个新项目,你可能会发现使用 create-vue 这个脚手架工具更容易,它能创建一个基于 Vite 的项目,并包含加入 Vue Router 的选项,指令如下:

// npm
npm create vue@latest
// yarn
yarn create vue
// pnpm
pnpm create vue

如果你想兼容 IE11,那便可以基于 Vite 创建一个 vue2 项目

npm create vue@legacy

回归正题:

使用 create-vue 脚手架工具可以快速创建 vue3 项目,包含如下选项(空格切换[是,否],enter选中):

在这里插入图片描述
上面是我创建了一个项目名称为 vite-vue3-project-ts 的项目。

cd vite-vue3-project-ts
npm install

在这里插入图片描述

npm run format

在这里插入图片描述

npm run dev

在这里插入图片描述

页面运行后:
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是搭建 Vue3 项目的步骤: 1. 安装 Node.js 首先,你需要在你的电脑上安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。你可以在 https://nodejs.org/ 上下载并安装 Node.js。 2. 安装 Vue CLI Vue CLI 是一个官方的 Vue.js 项目脚手架,可以帮助你快速搭建一个 Vue 项目。你可以使用以下命令安装 Vue CLI: ``` npm install -g @vue/cli ``` 3. 使用 Vue CLI 创建项目 使用 Vue CLI 创建一个新的 Vue 项目非常简单,只需要执行以下命令: ``` vue create your-project-name ``` 在创建项目的过程中,你需要选择一些选项,例如: - 选择一个预设(你可以选择默认的预设或手动配置) - 选择要使用的插件(例如 TypeScript、Vuex、Vue Router、Axios 等) - 配置项目的名称、描述等信息 在这个过程中,你需要选择 TypeScript、Vuex、Vue Router 和 Axios 插件,并选择手动配置预设。在手动配置预设时,你需要选择 Vue 3 和 Babel 编译器。 4. 安装 Element Plus Element Plus 是一个基于 Vue 3 的 UI 组件库,可以帮助你快速构建界面。你可以使用以下命令安装 Element Plus: ``` npm install element-plus --save ``` 然后,在你的 main.ts 文件中引入 Element Plus: ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(store).use(router).use(ElementPlus).mount('#app') ``` 5. 使用 Sass Sass 是一种 CSS 预处理器,可以帮助你更加方便地书写 CSS。你可以使用以下命令安装 Sass: ``` npm install sass --save-dev ``` 然后,在你的 App.vue 文件中使用 Sass: ```vue <template> <div class="app"> <h1>Hello, world!</h1> </div> </template> <style lang="scss"> .app { color: red; } </style> ``` 6. 配置 Axios Axios 是一个用于发送 HTTP 请求的 JavaScript 库。你可以使用以下命令安装 Axios: ``` npm install axios --save ``` 然后,在你的 main.ts 文件中配置 Axios: ```typescript import axios from 'axios' axios.defaults.baseURL = 'http://localhost:3000/api' axios.defaults.timeout = 5000 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) axios.interceptors.response.use(response => { // 对响应数据做些什么 return response }, error => { // 对响应错误做些什么 return Promise.reject(error) }) ``` 现在你已经成功搭建了一个 Vue3 项目使用了 TypeScript、ViteVuex、Element Plus、Axios、Sass 和 Vue Router。你可以根据你的需要进行进一步的开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值