开发环境
- IDE: 推荐VS Code,其实你如果用惯了 JB那一套也挺好的，只不过人家是收费的。
- 浏览器：推荐Chrome。
- 依赖项：
- Vite
- Node.js
然后在命令行执行以下命令，创建项目：
代码语言：javascript复制npm init @vitejs/app
然后跟着一路设置一下。 介绍一下项目目录:
代码语言：javascript复制.
├── README.md
├── index.html 入口文件
├── package.json
├── public 资源文件
│ └── favicon.ico
├── src 源码
│ ├── App.vue 单文件组件
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── main.js 入口
└── vite.config.js vite工程化配置文件
接着两步
代码语言：javascript复制npm install // 安装依赖
npm run dev // 启动项目
如果想安装其他的组件依然可以运行 npm install xxx 如：
代码语言：javascript复制npm install vue-router@next vuex@next
规范
以下一般是src目录的规范，方便管理。
代码语言：javascript复制├── src
│ ├── api 数据请求
│ ├── assets 静态资源
│ ├── components 组件
│ ├── pages 页面
│ ├── router 路由配置
│ ├── store vuex数据
│ └── utils 工具函数
如果有多页面，在router文件夹 新建index.js
代码语言：javascript复制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
代码语言：javascript复制<template>
<h1>这是关于页面</h1>
</template>
home.vue
代码语言：javascript复制<template>
<h1>这是首页</h1>
</template>
然后把App.vue 修改如下：
代码语言：javascript复制<template>
<div>
<router-link to="/">首页</router-link> |
<router-link to="/about">关于</router-link>
</div>
<router-view></router-view>
</template>
这样就OK了，哈哈！是不是很简单？（难的在后面呢！）
