前端开发准备

安装工具

在项目开始前需要将项目的包管理工具问题解决，这里我使用的包管理工具是yarn。

安装yarn
在你的vue文件目录下的终端安装
npm i -g yarn
创建项目

如果你使用的npm包管理工具就使用如下命令创建项目

code 复制代码

 npm create vite@latest my-vue-app(项目名字)

如果是yarn：

code 复制代码

 yarn create vite my-app(项目名字)

安装依赖
在你创建的项目文件下的终端安装
1. npm: npm install
2. yarn：yarn
执行项目
1. yarn： yarn dev
2. npm：npm run dev
css预处理器安装命令
yarn add less -D(css的less应用)

vue页面

快捷键(快速生成页面基本框架)
- vb3s
移动端适配(lib-flexible)
- yarn add lib-flexible
- 在全局main.js中引入 import 'lib-flexible';
reset.css
- 初始样式，让页面初始化，这也是一个网站，直接将内容复制粘贴即可
- 全局引入 import '文件目录/reset-css'
vant 移动端UI框架

是一个简化书写的css样式框架，一个网站
- 安装yarn add vant
- 简单使用方式(全局)：import { Button } from 'vant';
  import 'vant/lib/index.css';
  const app = createApp(App)
  app.use(Button) ------ 要在(挂载)app.mount('#app')前面引用

页面开发准备

配路由，展示各种单页面
1. 安装：yarn add vue-router@4
2. 准备：创建一个js文件
3. 在js文件里面 import { createRouter,createWebHistory } from 'vue-router';

js 复制代码

 const routes = []

   const router = createRouter({
   history: createWebHistory(),
   routes(这个是key):routes
   })
   export default router(抛出路由)

全局引入：import router from './router.js'并app.use(router)
配路由

在创建好的js文件里面实现路由跳转，切换文件显示，实现切换页面

js 复制代码

const routes = [
         {
               path: '/login',
               name: 'login',
               component: () => import('@/views/Login.vue')
         }]