前端开发准备
安装工具
在项目开始前需要将项目的包管理工具问题解决，这里我使用的包管理工具是yarn。
- 安装yarn
在你的vue文件目录下的终端安装npm i -g yarn - 创建项目
- 如果你使用的npm包管理工具就使用如下命令创建项目
npm create vite@latest my-vue-app(项目名字)
- 如果是yarn：
yarn create vite my-app(项目名字)
- 安装依赖
在你创建的项目文件下的终端安装- npm:
npm install - yarn：
yarn
- npm:
- 执行项目
- yarn：
yarn dev - npm：
npm run dev
- yarn：
- 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')前面引用
页面开发准备
- 配路由，展示各种单页面
- 安装：
yarn add vue-router@4 - 准备：创建一个js文件
- 在js文件里面
import { createRouter,createWebHistory } from 'vue-router';
- 安装：
const routes = []
const router = createRouter({
history: createWebHistory(),
routes(这个是key):routes
})
export default router(抛出路由)
-
全局引入：
import router from './router.js'并app.use(router) -
配路由文章来源：https://www.toymoban.com/news/detail-798049.html
在创建好的js文件里面实现路由跳转，切换文件显示，实现切换页面文章来源地址https://www.toymoban.com/news/detail-798049.html
const routes = [
{
path: '/login',
name: 'login',
component: () => import('@/views/Login.vue')
}]
到了这里，关于vue前端开发准备工作ing...的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
