本文共 3676 字,大约阅读时间需要 12 分钟。
请安装以下开发工具(未详述的可在网上找相关资料)
安装vscode
安装Node.js
为npm配置国内镜像
npm config set registry https://registry.npm.taobao.org/
配置命令执行完毕后,可用如下命令检测
npm config get registry
安装yarn
npm install -g yarn
为yarn配置国内镜像
yarn config set registry https://registry.npm.taobao.org/
配置命令执行完毕后,可用如下命令检测
yarn config get registry
cd F:\git\js-sx #进入项目存放目录 F:\git\js-sxyarn create @vitejs/app jd-web-vue3 --template vue #jd-web-vue3为项目名
执行如下命令安装依赖并启动项目
cd F:\git\js-sx\jd-web-vue3 #进入项目目录yarn #安装依赖yarn dev #以开发模式启动项目
出现以下信息,表示项目已在Vite开发服务器上启动成功
在浏览器地址栏输入http://localhost:3000,将呈现以下界面
项目根目录下配置文件vite.config.js
import vue from '@vitejs/plugin-vue';const path = require('path');/** * https://vitejs.dev/config/ * @type {import('vite').UserConfig} */export default { alias: { /* 路径别名 若为文件系统路径必须是绝对路径的形式,否则将以别名原样呈现,不会解析为文件系统路径路径 */ //'@': process.cwd()+'/src' //'@':path.resolve('src') //'@':path.resolve(__dirname, 'src') '@':path.resolve(__dirname, './src') }, plugins: [vue()], /* Project root directory/项目根目录(index.html所在位置),可以是绝对路径,也可以是相对于本配置文件的路径。 default:process.cwd() 返回 Node.js 进程的当前工作目录 */ //root:process.cwd(), /* Default: / Base public path (应用基础请求路径) when served in development or production. Valid values include: Absolute URL pathname, e.g. /foo/ Full URL, e.g. https://foo.com/ Empty string or ./ (for embedded deployment) */ base:'/jd-vue3/', /* Directory to serve as plain static assets. Files in this directory are served at / during dev and copied to the root of outDir during build, and are always served or copied as-is without transform. The value can be either an absolute file system path or a path relative to project root. 静态资源目录,开发模式下会自动放到 / 下,生产模式下会自动放到 outDir 根路径下。 该目录可以配置为文件系统绝对目录或者相对于项目根目录的相对路径 */ publicDir:'public', /* Default: 'development' for serve, 'production' for build Specifying this in config will override the default mode for both serve and build. This value can also be overridden via the command line --mode option. */ //mode:'', //vite开发服务器配置 server:{ host:'localhost', port:3000, open:true, strictPort:false,//如果端口占用,是退出,还是尝试其他端口 https: false,// 是否开启 https // 反向代理 // proxy: { // // string shorthand // '/foo': 'http://localhost:4567/foo', // // with options // '/api': { // target: 'http://jsonplaceholder.typicode.com', // changeOrigin: true, // rewrite: (path) => path.replace(/^\/api/, '') // }, // // with RegEx // '^/fallback/.*': { // target: 'http://jsonplaceholder.typicode.com', // changeOrigin: true, // rewrite: (path) => path.replace(/^\/fallback/, '') // } // } }, //生产模式打包配置 build:{ outDir: 'dist',//Specify the output directory (relative to project root). }}
进入项目目录,执行以下命令
yarn add vue-router@4
准备工作
在src下新建目录views,并在该目录下新建一个页面home.vue新建路由目录: 在src下新建目录router
在目录router下新建文件routes.js和index.js两个文件
routes.js
export default[ { path:'/', name:'Home', component:()=>import('@/views/home.vue') //路由懒加载 }];
index.js
import { createRouter,createWebHistory} from 'vue-router';import routes from './routes'const base = '/jd-vue3/';//应用的基础请求路径const router = createRouter({ history:createWebHistory("/jd-vue3/"), //history模式使用HTML5模式 routes});export default router;
修改main.js
修改App.vue
测试
测试子路由
在views目录下新建目录info,并在该目录下建立vue文件myinfo.vue修改routes.js
修改home.vue 测试至此,一个基本的Vue3项目架子已经搭成,后续还将和axios、Element3.0/Vant3.0等整合,以及结构优化等等。
转载地址:http://rnhdi.baihongyu.com/