开发环境准备

请安装以下开发工具（未详述的可在网上找相关资料）

1. 安装vscode

2. 安装Node.js

3. 为npm配置国内镜像

   npm config set registry https://registry.npm.taobao.org/
   

   配置命令执行完毕后，可用如下命令检测

   npm config get registry
   

4. 安装yarn

   npm install -g yarn
   

5. 为yarn配置国内镜像

   yarn config set registry https://registry.npm.taobao.org/
   

   配置命令执行完毕后，可用如下命令检测

   yarn config get registry
   

创建Vue3项目

通过Vite建立一个初始Vue3项目

cd F:\git\js-sx #进入项目存放目录 F:\git\js-sx
yarn 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).
  }

}

路由管理

安装VueRouter

进入项目目录，执行以下命令

yarn add vue-router@4

配置路由

1. 准备工作
   在src下新建目录views，并在该目录下新建一个页面home.vue
   

2. 新建路由目录： 在src下新建目录router
   

3. 在目录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;
   

4. 修改main.js

5. 修改App.vue
   

6. 测试
   

7. 测试子路由
   在views目录下新建目录info，并在该目录下建立vue文件myinfo.vue

   <template>
       <div class="myinfo">
           <div v-for="i in n" :key="i"  :style="{'animation-duration':duration()+'s', 'animation-delay':delayTime()+'s','background-color':color()}">{{i}}</div>
       </div>
   </template>
   <script setup>
       const n = Math.floor(Math.random()*200);
       const duration = ()=>Math.random()*2+0.5;
       const delayTime = ()=>Math.floor(Math.random()*10);
       const color = ()=>`rgb(${Math.ceil(Math.random()*255)},${Math.ceil(Math.random()*255)},${Math.ceil(Math.random()*255)})`;
   </script>
   <style scoped>
   .myinfo{
       display: flex; 
       justify-content: flex-start;
       flex-wrap: wrap;   
   }
   .myinfo>div{
       flex:none;
       width:50px;
       height:50px;
       border-radius:25px;
       text-align: center;
       line-height: 50px;
       font-size:20px;    
       margin:30px;
       animation: myanimation infinite both;       
   }
   @keyframes myanimation {
       0%{
           transform: scale(1);
       }
       50%{
           transform: scale(1.5);
       }
       100%{
           transform: scale(1);
       }
   }
   </style>
   

   修改routes.js
   
   修改home.vue
   
   测试
   

小结

至此，一个基本的Vue3项目架子已经搭成，后续还将和axios、Element3.0/Vant3.0等整合，以及结构优化等等。