一创建项目：

方式一：进入可选方式来创建项目
npm方式：
$ npm init @vitejs/app
yarn方式：
$ yarn create @vitejs/app
然后进入编辑项目文件夹名字【默认vite-project】
最后进入选择支持的框架模板【选择需要的一个】

方式二：构建vue 项目
npm方式：（npm 7+版本以上）
npm init @vitejs/app my-vue-app – --template vue
yarn方式：
yarn create @vitejs/app my-vue-app --template vue

国内的同学建议为：将会自动创建一个名为init的文件项目
执行：cnpm init @vitejs/app

二运行项目：

进入到创建的新项目中
cd vite-porject
安装所需的包----------因为package.json文件里面描述了所需的包
npm install
进入开发模式测试服务器
npm run dev

国内的同学建议为：
执行1：cd init
执行2：cnpm install
执行3：cnpm run dev

package.json文件里面的脚本指定的启动命令"scripts": {“dev”: “vite”,“build”: “vite build”,“serve”: “vite preview”},
dev开发测试服务
build打包服务
serve生产运行服务
指令为：npm run + [服务]

想要导入一些npm包来使用，那么就项目文件夹里面打开cmd命令窗口，进行安装想要的包
1：如安装vue-router
命令：npm install vue-router@4 -D
国内的为:cnpm install vue-router@4 -D
2:安装vant
命令：npm install vant@next -S
国内的为:cnpm install vant@next -S

npm 安装 -D 和-S的区别
-D 是在开发环境中协助开发需要使用的
-S是生产环境打包时需要的

上面是安装了vue-router，那么他将会自动在package.json中添加上
代码如下

{"version": "0.0.0","scripts": {"dev": "vite","build": "vite build","serve": "vite preview"},"dependencies": {"vant": "^3.1.3","vue": "^3.0.5"},"devDependencies": {"@vitejs/plugin-vue": "^1.2.4","@vue/compiler-sfc": "^3.0.5","vite": "^2.4.0","vue-router": "^4.0.10"}
}

1：先测试添加的vant
添加导入一个组件【import Home from ‘…/views/Home.vue’】
而且还设置了路由，指向Home这个组件
现在就建立一个组件，用views文件夹来装Home.vue这个组件
src文件夹内创建views文件夹，并在里面创建一个Home.vue组件
Home.vue里面的代码为

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><p>home主页</p><van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button></div>
</template><script></script>

然后在App.vue文件中加入这个组件

添加下面两行<Home /> 表示组件要展示的位置import Home from './views/Home.vue' 表示从那里获取这个组件

位置如下

<template><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Hello Vue 3 + Vite" /><Home />
</template><script setup>
import HelloWorld from './components/HelloWorld.vue'
import Home from './views/Home.vue'// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</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文件中添加引入vant

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

添加之后

import { createApp } from 'vue'
import App from './App.vue'
// 添加vant
import Vant from 'vant';
import 'vant/lib/index.css';// 既然上面添加了导入路径，那么在下面添加使用
createApp(App).use(Vant).mount('#app')

那么，这时在浏览器里面就可以看到使用了vant这个ui了

2：配置router
src目录下创建router文件夹，
并在router文件夹内创建一个index.js文件【index.js的内容和旧版本没有改变】
index.js代码如下

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [{path: '/',name: 'Home',component: Home},
]
const router = createRouter({history: createWebHashHistory(),routes
})
export default router

引入router

// 添加router
import router from './router'
在createApp(App)后面添加使用
.use(router)

main.js文件引入router之后的代码：

import { createApp } from 'vue'
import App from './App.vue'
// 添加vant
import Vant from 'vant';
import 'vant/lib/index.css';
// 添加router
import router from './router'createApp(App).use(Vant).use(router).mount('#app')

建议

如果是引入饿了么ui库或者是有赞ui库
建议使用全局使用，大型商业项目再进行优化，按需加载

额外提示：

1

index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。
Vite 也支持多个 .html 作入口点的多页面应用模式。

2

src文件夹里面的
index.css文件里面记载通用的css样式，用于全局【vite vue模式默认不创建】
main.js里面

import { createApp } from 'vue'
import App from './App.vue'# 这里插如引入的index.css文件
import './index.css'
createApp(App).mount('#app')
# 创建的App挂载到index.html的id=app地方 【记录1】

3

【.gitgnore】文件里面记录不需要上传的文件

node_modules
.DS_Store
dist
dist-ssr
*.local

4

vite.config.js文件的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({// server配置参考https://cn.vitejs.dev/config/#envdir// 【可选配置】添加serverserver: {// 【可选配置】开启http2测试服务器// https: true,// 【可选配置】设置开启服务器之后，自动打开网页open: true,// 【可选配置】允许跨域// cors: true,},plugins: [vue()]
})

国内搭建vite vue和国外的不一样的，跟着教程会踩很多坑相关推荐

搭建 Vite + Vue 3 + Typescript + tsx + less 项目
搭建 Vite + Vue 3 + Typescript + tsx + less 项目项目地址: https://github.com/DuXiaoHeng/vue3-tsx 1. 使用vite脚 ...
面试官：自己搭建过vue开发环境吗？
开篇前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...
搭建RocketMQ踩的坑
RocketMQ搭建步骤开发环境 64位 centos7(虚拟机,1G内存) 64位 jdk1.8 maven 3.5.0 Git tomcat(用于启动rocketmq-console) rock ...
npm -- 如何在本地安装npm npm 相关命令本地使用命令行搭建一个 vue 工程
npm 安装 1.下载 nodejs 在安装完 nodejs 之后,执行 npm -v ,就已经可以执行出结果了注1:npm 和 cnpm 的区别 npm 是 nodejs 的包管理器,用于 nod ...
如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
【前端】搭建一个VUE框架
大伙好,最近狠狠焦虑了,因为想搞前端技术岗找暑假实习担心自己能力不够,还是希望如果有同学大学期间就决定毕业找工作的话,一定要抓住机会大学期间狠狠锻炼本领噢,不要虚度光阴说了点题外话,回到正题,焦虑的 ...
Vite+Vue+iClient for Leaflet引入并实现MapV/Eharts第三方可视化库示例
作者:gaogy 文章目录背景一.使用Vite构建Vue3+JavaScript项目二.搭建iClient for Leaflet开发环境三.第三方可视化库Echarts的使用四.第三方可视 ...
【TLJH】the-littlest-jupyterhub国内搭建和配置详细教程
文章目录前言什么是jupyterhub 什么是TLJH(the-littlest-jupyterhub) 一.安装要求二.用户权限安装步骤国内安装国外安装配置 Base URL User ...
从零开始搭建一个vue项目 -- vue-cli/cooking-cli（一）
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...

国内搭建vite vue和国外的不一样的，跟着教程会踩很多坑

一创建项目：

二运行项目：

建议

额外提示：

1

2

3

4

国内搭建vite vue和国外的不一样的，跟着教程会踩很多坑相关推荐

最新文章

热门文章