开发环境

然后在命令行执行以下命令，创建项目：

npm init @vitejs/app

然后跟着一路设置一下。 介绍一下项目目录:

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components   
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

接着两步

npm install   // 安装依赖
npm run dev   // 启动项目

如果想安装其他的组件依然可以运行 npm install xxx 如：

npm install vue-router@next vuex@next

规范

以下一般是src目录的规范，方便管理。

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

如果有多页面，在router文件夹 新建index.js

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

因为现在还没有 about 和 home 这2个组件，所以会报错， 所以现在我们到pages里 新建2个文件

about.vue

    
这是关于页面

home.vue

    
这是首页

然后把App.vue 修改如下：

  

    首页 | 
    关于
  
  

这样就OK了，哈哈！是不是很简单？（难的在后面呢！）

如果你觉得有点收获新建vue项目，欢迎点个关注新建vue项目， 也欢迎分享给你身边的朋友。

限时特惠：本站每日持续更新海量展厅资源，一年会员只需29.9元，全站资源免费下载
站长微信：zhanting688

htebazile普通用户

收藏 海报 链接