一镜到底vue前端开发准备

前端开发准备

安装工具

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

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

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

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

2. 如果是yarn：

 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';

 const routes = []

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

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

5. 配路由

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

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