目录
一、简介
- Vue简介:Vue为web编程前端三大框架之一(Angular、React、Vue),中国人尤雨溪设计,设计理念以组件化开发为基本理念,强调可复用性
- Vue-cli简介:俗称脚手架,集成Vue所需环境配置,基本开发环境工具,号称0配置开发
- 组件:
- 概念:可以理解成一个封装好了的单元,类似于积木概念
- 包含:HTML,CSS,Vuejs
- 组织结构:树形组织结构,页面->区块页面->页面小单元->小单页的小图标组合,全部为组件,有嵌套特性
- typescript:本笔记以ts编写,真香定律,编写简单,五分钟了解传送门
二、初始配置
2.1 安装node
- node下载页面:点击进入下载页面
- 版本终端查询命令
node -v # node版本 npm install -g yarn # yarn包管理工具
- 常见npm错误
- WIN10错误提示:npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
- 原因:严格ssl证书检查,安全保护
- 解决:
- 暂时关闭,下载完成后,再打开
npm config set strict-ssl false
,下载完成后,npm config set strict-ssl true
- 错误 : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1,因为在此系统上禁止运行脚本
- 原因:win10默认禁用脚本
- 解决:
- 在powershell中输入
set-ExecutionPolicy RemoteSigned
,选A - 输入
get-ExecutionPolicy
,查看当前状态是否为RemoteSigned
- 在powershell中输入
- WIN10错误提示:npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
2.2 安装IDE
- 使用VSCode 传送门
- 进入初始界面
- vscode插件推荐
- Prettier :格式化JavaScript 、TypeScript、CSS
- Auto Close Tag:自动闭合HTML/XML标签
- Auto Rename Tag :自动完成另一侧标签的同步修改
- Beautify:格式化 html 、JavaScript 、CSS
- Bracket Pair Colorizer :给括号加上不同的颜色,便于区分不同的区块
- Debugger for Chrome:映射vscode上的断点到chrome上,方便调试
- Path Intellisense:自动提示文件路径,支持各种快速引入文件
- Vetur:Vue多功能集成插件,vscode官方钦定Vue插件
2.4 项目初始化
- 安装vite
# 安装的同时创建vite项目 # 后续安装依照提示进行即可启动项目 yarn create vite # 进入project_01文件夹:有提示 cd project_01 # 依赖安装命令:有提示,根据package.json文件, # 效果同npm install yarn # 添加包 yarn add 包名 # 删除包 yarn remove 包名
vite简介:vite(vue官方团队)针对webpack的替代方案,虚拟服务器进行优化,闪电更新,对ts支持友好
vite官方文档:传送门
2.5 项目首运行
-
测试命令
# 运行测试的虚拟服务器,定义在package.json文件中,效果同npm run dev yarn dev
-
点击链接显示如下
-
项目结构:project_01文件夹
dist目录:打包部署文件目录,
yarn build
后才会生成
修改组件版本:在package.json中修改版本后,需要删除yarn.lock,然后再yarn install,否则版本会被锁定
三、项目处理
- 文件清理
- /public目录:清空
- /src/assets、/src/components目录:清空
- 新建/src/views目录
3.1 工程主ts文件
- 位置:/src/main.ts
- 作用:程序入口文件,初始化vue实例,注册插件,加载公共组件
// 导入createApp 函数,用于创建根Vue实例,若没给相对路径, // 则到node_modules文件夹中找 import { createApp } from 'vue' // 项目的根组件:组件树的根 import App from './App.vue' // 导入路由,包含路由与组件映射,需yarn add vue-router@4 import router from './router' // 创建根Vue实例:并加入各种选项(插件),挂载到app挂载点上(index.html) createApp(App).use(router).mount('#app')
vue-router官方文档:传送门
3.2 router路由配置
- 位置:新建/src/router/index.ts
- 安装前端路由:
yarn add vue-router@4
- 作用:路由与组件的映射
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' // 新增:导入Home组件,'@'代表'/src'路径 import Home from '@/views/Home.vue' // 新增:相对路径导入Shopping组件,效果同上一行 import Shopping from '../views/Shopping.vue' // 路由配置列表:以下配置路由与组件的映射,并将常量routes注册 // 进router实例中,全局可用this.$router调用 const routes: Array<RouteRecordRaw> = [ { // 此处表示输入http://localhost:8080/ path: '/', // 前端会重定向到Home组件 redirect: '/home' }, { // 此处表示输入http://localhost:8080/home path: '/home', // 路由名称:可用于路由守卫,可省略 name: '首页', // 导入的组件名:无引号,见页面顶部import component: Home }, { // 此处输http://localhost:8080/shopping path: '/shopping', // 路由名称:可用于路由守卫,可省略 name: '购物', // 导入的组件名:无引号,见页面顶部import component: Shopping } ] // 配置结束,以下保持默认 // 创建路由实例router,全局可用this.$router调用 const router = createRouter({ // 路由模式:下面这个就是常规的,还有hash模式 // vite安装会提示process错误:删掉process.env.BASE_URL如下 history: createWebHistory(), // 路由配置列表 routes }) // 导出:给main.ts等文件使用 export default router
3.3 App.vue根组件
- 位置:/src/App.vue
- 作用:其他所有页面主组件(放在/src/views中)都是以此文件为根组件,并在此页面下进行页面切换的
<template> <!-- vue3 template标签内部可以放多个标签 --> <div id="nav"> <!-- 标签行,相当于a标签,to选项会到index.js文件找对应的组件做跳转--> <router-link to="/home">首页</router-link><br /> <router-link to="/shopping">购物车</router-link><br /> <router-link to="/">会跳转到首页</router-link><br /> </div> <!--此标签显示当前路由所对应的组件,映射关系在router/index.ts中--> <router-view /> </template>
3.4 views分支组件
-
位置:/src/views/
-
作用:各级主页面,即需要导入index.ts文件做路由映射的页面(也称为主组件)
-
文件
/src/views/Home.vue
<template> <h1>这是首页展示区</h1> </template>
-
文件
/src/views/Shopping.vue
<template> <!--此区域写html代码--> <h1>这是购物展示区</h1> </template> <script lang="ts" setup> // 此区域写ts代码,setup语法糖 </script> <style> /* 此区域写css代码*/ </style>
3.5 解决@路径识别
- tsconfig.json
{ "compilerOptions": { ... "baseUrl": ".", "paths": {"@/*": ["src/*"] }, ... }, ... }
- tsconfig.node.json文件
{ "compilerOptions": { ... //增加此句,打开path开关 "allowSyntheticDefaultImports":true, ... }, ... }
- vite.config.ts
//... // path导入:需要tsconfig.node.json文件中的开关开启 import path from "path"; // https://vitejs.dev/config/ export default defineConfig({ // resolve内的文件路径相当于cd __dirname; cd ./src意思 resolve: { // 增加此句,即路径别名 alias: { "@": path.resolve(__dirname, "src"), }, }, ... });
path找不到:
yarn add path
__dirname找不到:yarn add @types/node
3.6 效果图
四、调试
4.2 Vue devtools工具
-
安装:谷歌浏览器搜索并安装Vue devtools插件
-
配置:管理拓展程序
-
使用
注意:只能在开发环境中使用,改成生产环境后,就无此标签,若是未正常开启,查看main.js中的if-else语句
五、git管理
5.1 首次提交
- 创建远程仓库(gitee版)
- 命令
# 设置上传的远程仓库的配置 # --global针对系统上所有仓库,去掉只针对当前仓库 git config --global user.name "用户名" git config --global user.email "用户邮箱" # 将当前文件夹内文件添加到本地暂存区,Git开始对这些文件进行跟踪 # 追踪命令写法:git add 文件名/文件夹名 git add . # 将暂存区推送到本地仓库主分支 # 可通过git branch查看主分支名:应该是master git commit -m "项目初始化" # 配置远程仓库,代号为origin git remote add origin https://网址.git # 将本地仓库master主分支推送到远程仓库中 git push origin master
- 日常使用
# 编辑前先拉取远程仓库到本地 # 若非首次拉取,可直接git pull即可 git pull origin master # 此命令是强制线上覆盖线下代码: 线上分支/本地分支 git fetch --all && git reset --hard origin/master && git pull # 。。。进行文件编辑。。。 # 添加暂存区、推送本地仓库、将修改提交到远程仓库 # add可多次操作,commit是关键提交步,积累到一定量再执行 git add . git commit -m "备注内容" git push origin master
5.2 异地操作
场景:工作电脑变动
- 命令
# 克隆远程仓库到本地新建的project_01文件夹 # 克隆后会在vue_dir目录下生成project_01文件夹 # 并将仓库里的文件放到此文件夹内 C:\vue_dir>git clone https:仓库网址.git project_01 cd project_01 # 安装依赖:由package.json提供目录,安装yarn详见2.1节 yarn # git项目初始化,此处生成本地master主分支 # 在当前目录生成一个.git文件夹 # 可以通过git branch查看本地分支列表 git init git config --global user.name "用户名" git config --global user.email "用户邮箱" git remote add origin https://仓库网址.git
- 日常使用:同5.1节
5.3 常用命令
- 版本管理
命令 注释 git branch
显示本地分支列表 git branch 分支名
增加本地分支 git checkout 分支名
切换当前活动的本地分支,当你切换分支的时候,Git 会用该分支的最后
提交的快照替换你的工作目录的内容, 所以多个分支不需要多个目录
当前活动分支前面有*
git branch -d 分支名
删除分支 git merge 待合并分支名
合并两个分支:切换到主分支,运行这条命令,运行无冲突后,删除
待合并分支,若有冲突,根据提示修改,修改结束后,用git add 文件名
,
提示git已处理好冲突git rm --cached 文件/文件夹
从跟踪列表中删除 - 远程仓库管理
命令 注释 git remote -v
显示远程仓库网址 git remote remove 远程仓库名称
删除远程仓库 git remote add 仓库代号 远程仓库网址
增加远程仓库 - git补充:点此处