npm create vite@latest
.进入项目目录
cd vite_demo
.安装依赖;每次复制或克隆别人项目都要先安装依赖;默认情况下,项目不提供依赖,仅仅在配置文件中说明需要哪些依赖
npm install
.运行项目
npm run dev
npm run build
base: './'
.每条路由都对应一个组件 - map each route to a specific component
.定义的路由导出并在 main.js 中使用
.特别的 单文件组件 SFC,包括逻辑、结构和样式
.逻辑中可以引入其它组件、库和模块
import { ref } from 'vue'; import axios from 'axios';
.样式中可以引入其它样式
@import url(//at.alicdn.com/t/c/font_4090429_8xfmdtpelxu.css);
.可以引入样式库和第三方库等
import './assets/main.css' import 'font-awesome/css/font-awesome.min.css'
<div id="app"></div> <script type="module" src="/src/main.js"></script>
{ "name": "helloworld", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "axios": "^1.6.7", "font-awesome": "^4.7.0", "nanoid": "^5.0.6", "swiper": "^11.0.7", "vue": "^3.4.15" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.3", "sass": "^1.71.1", "vite": "^5.0.11" } }
"dev": "vite --host"
"dev": "vite --host 0.0.0.0"
"dev": "vite --host 0.0.0.0 --port 5173"
import { fileURLToPath, URL } from "node:url"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import vueDevTools from "vite-plugin-vue-devtools"; // https://vite.dev/config/ export default defineConfig({ plugins: [vue(), vueDevTools()], resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, });
base: './'
server: { open: false, //启动项目自动弹出浏览器预览;默认 false,手动启动 host: '0.0.0.0', //主机;默认 locahost port: '5173', //端口;默认 5173 proxy: { '/api': { target: 'http://127.0.0.1:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') //不可以省略 rewrite } } }
npm install prettier --save-dev
"format": "prettier --write ."
"format": "prettier --write src/"
npm run format