手机版网站源码网站建设视频讲解

当前位置： 首页 > news >正文

手机版网站源码,网站建设视频讲解,免费设计企业logo,南山网络科技有限公司最近发现职场前端用的框架大多为vue#xff0c;所以最近也跟着黑马程序员vue3的课程进行学习#xff0c;以下是我的学习记录 视频网址#xff1a; Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili 学习日记#xff1a; vue3学习日记1 - 环境搭建-CSDN博… 最近发现职场前端用的框架大多为vue所以最近也跟着黑马程序员vue3的课程进行学习以下是我的学习记录 视频网址 Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili 学习日记 vue3学习日记1 - 环境搭建-CSDN博客 vue3学习日记2 - 组合式API基础学习-CSDN博客 vue3学习日记3 - 组合式API练习小案例-CSDN博客 vue3学习日记4 - Pinia-CSDN博客 一、项目初始化 1、创建一个vue项目 2、安装相关依赖 3、运行项目 4、创建文件夹 二、git管理 1、概述 Git 是一个功能强大的工具特别适合需要团队协作、版本控制以及高效管理代码历史的场景。由于它的分布式特性和高效的操作Git 已经成为现代软件开发中最常用的版本控制系统之一。 基于create-vue创建出来的项目默认没有初始化git仓库需要我们手动初始化 2、执行命令并完成提交 1、git init 初始化一个新的git仓库 2、git add . 将文件修改为待提交的状态git add 只是将修改暂时记录在暂存区真正将改动永久保存到 Git 仓库中还需要执行 git commit 命令。 注意后面要加 .
3、git commit -m init 提交文件的更改到 Git 仓库并附上提交信息。 三、别名路径联想设置 1、什么是别名路径联想提示 在编写代码的工程中一旦输入/VSCode会立刻联想出src下的所有目录和子文件同一文件路径访问不容易出错 2、配置别名联想设置 1、正常情况下输入“/”没有任何反应 2、在项目根目录下新增jsconfig.json文件 新增后可能会自动到vite.config.js下 {compilerOptions: {baseUrl: ./,paths: {/:[src/]}} } 3、配置完成 4、总结 在这只是做联想提示并没有转换路径 实际路径转换是在文件vite.config.js下 四、elementPlus按需导入 官网 安装 | Element Plus (element-plus.org) 1、安装包管理器 根据官网API可知输入他给的命令进行安装 输入命令运行结果 2、安装配套的插件 安装成功后可以在以下文件中找到 3、修改配置文件 根据官网提示编写vite.config.ts相关配置 import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite import vue from vitejs/plugin-vue import vueDevTools from vite-plugin-vue-devtools// elementPlus插件导入 import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers// https://vite.dev/config/ export default defineConfig({plugins: [vue(),vueDevTools(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))},}, }) 4、重新运行一下项目 5、检测elementPlue是否导入成功 script setup /scripttemplateel-button typesuccessSuccess/el-button /template 运行结果 五、elementPlus主题色修改 1、安装scss 输入命令 npm install sass 2、准备定制样式文件 在文件夹style下新建文件夹element在此文件夹下新建文件index.scss index.scss内容 // styles/element/index.scss /* 只需要重写你需要的即可 */ forward element-plus/theme-chalk/src/common/var.scss with (\(colors: (primary: (// 主色base: #27ba9b,),success: (// 成功色base: #1dc779,),warning: (// 警告色base: #ffb302,),danger: (// 危险色base: #e26237,),error: (// 错误色base: #cf4444,),), ); 3、通知Element采用scss语言 4、自动导入样式化进行覆盖 import { fileURLToPath, URL } from node:urlimport { defineConfig } from vite import vue from vitejs/plugin-vue import vueDevTools from vite-plugin-vue-devtools// elementPlus插件导入 import AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers// https://vite.dev/config/ export default defineConfig({plugins: [vue(),vueDevTools(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [// 配置elementPlus采用sass样式配色系统ElementPlusResolver({ importStyle:sass})],}),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))},},css:{preprocessorOptions:{scss:{// 自动导入定制化样式文件进行样式覆盖additionalData:use /styles/element/index.scss as *;}}} }) 5、测试 重新运行项目按钮颜色改变修改成功 六、axios相关配置 1、安装axios 命令行中输入 npm install axios 2、axios基础封装 在utils文件夹下新建文件http.js // axios基础封装// 导入axios import axios from axios; // 创建一个axios实例 const httpInstance axios.create({// 设置接口基地址baseURL:http://pcapi-xiaotuxian-front-devtest.itheima.net,// 设置超时时间timeout:5000 })// 拦截器// axios请求拦截器 httpInstance.interceptors.request.use(config {return config }, e Promise.reject(e))// axios响应式拦截器 httpInstance.interceptors.response.use(res res.data, e {return Promise.reject(e) })// 导出 export default httpInstance 3、API 在api文件夹下testAPI.js // axios基础封装// 导入axios import axios from axios; // 创建一个axios实例 const httpInstance axios.create({// 设置接口基地址baseURL:http://pcapi-xiaotuxian-front-devtest.itheima.net,// 设置超时时间timeout:5000 })// 拦截器// axios请求拦截器 httpInstance.interceptors.request.use(config {return config }, e Promise.reject(e))// axios响应式拦截器 httpInstance.interceptors.response.use(res res.data, e {return Promise.reject(e) })// 导出 export default httpInstance 4、测试 在main.js中调用方法 // 测试接口函数 import { getCategory } from /apis/testAPI getCategory().then( res {console.log(res) }) 5、运行结果 6、问题小结 如果项目里面不同的业务模块需要的接口地址不同该如何来做 axios.create() 方法可以执行多次每次执行都会生成一个新的实例比如 const http1 axios.create({ baseURL: url1 }) const http2 axios.create({ baseURL: url2 }) 七、项目整体路由设计 1、一级路由 设计首页和登录页的路由一级路由 1、路由设计原则 找内容切换的区域如果是页面整体切换则为一级路由 2、删除文件夹views下面所有的文件 3、在views文件夹下建立文件夹Layout和Login并且分别在底下建立文件index.vue Layout下index.vue内容 templatediv我是首页/div /template Login下index.vue内容 templatediv我是登录页/div /template 你会发现一直报错将鼠标放上去报错信息如下 原因是vue3规定命名必须有两个单词组成index不符合规范要解决此问题只需要让其不强制要求组件命名即可 4、修改router文件夹下index.js import { createRouter, createWebHistory } from vue-router import Login from /views/Login/index.vue import Layout from /views/Layout/index.vue/*** createRouter : 创建router实例对象* createWebHistory 创建history模式的路由*/ const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,component: Layout,},{path: /login,component:Login},], })export default router 5、在App.vue使用 script setup /scripttemplate!-- 引入路由 --router-view/ /template 6、运行结果 2、二级路由 1、路由设计原则 找内容切换的区域如果是在一级路由页的内部切换则为二级路由 2、在views文件夹下建立文件夹Home和Categorize并且分别在底下建立文件index.vue 3、在routes文件夹下的index.js添加二级路由 import { createRouter, createWebHistory } from vue-router import Login from /views/Login/index.vue import Layout from /views/Layout/index.vue import Home from /views/Home/index.vue import Categorize from /views/Categorize/index.vue/*** createRouter : 创建router实例对象* createWebHistory 创建history模式的路由*/ const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,component: Layout,children:[{// 当默认显示时直接滞空就好path:,component:Home},{path:categorize,component:Categorize}]},{path: /login,component:Login},], })export default router 4、在Layout文件夹下index.js中添加二级路由入口 templatediv我是首页/divrouter-view/ /template 5、运行结果 3、问题小结 1、路由设计的依据是什么 内容切换的方式 2、默认二级路由如何进行设置 path配置置空 八、静态资源存放 图片资源 把images文件夹放到assets目录下 样式资源 把common.scss文件放到styles目录下 可以安装以下插件编写代码时显示报错信息 九、scss文件的自动导入 在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为var.scss的文件中正常组件中使用需要先导入scss文件再使用内部的变量比较繁琐自动导入可以免去手动导入的步骤直接使用内部的变量 1、在style文件夹下新建文件var.scss \)xtxColor:#27ba9b; \(helpColor:#e26237; \)sucColor:#1dc779; \(warnColor:#ffb302; \)priceColor:#cf4444 2、修改配置文件 3、测试(App.vue) script setup /scripttemplate!– 引入路由 –router-view/div classsc哈哈哈哈哈/div /templatestyle langscss scoped .sc{color: $warnColor; } /style 4、运行结果 问题小结 1、git初始化提交报错 原因 git没有配置用户名和邮箱地址 解决 设置邮箱和用户名 运行以下命令可查看设置是否正确 git config –global user.name git config –global user.email 运行结果