Vue3.0组合式API（一）-----vite+vue初始化

chuck-Gemini

已于 2022-09-21 16:43:25 修改

阅读量1.5k

点赞数 2

分类专栏： # Vue学习笔记文章标签： vue.js 前端

于 2020-09-08 19:33:51 首次发布

本文链接：https://blog.csdn.net/chucksun0426/article/details/108469546

版权

Vue学习笔记专栏收录该内容

9 篇文章 4 订阅

订阅专栏

一、简介

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证书检查，安全保护
  - 解决：
    1. 暂时关闭，下载完成后，再打开
    2. npm config set strict-ssl false，下载完成后，npm config set strict-ssl true
- 错误 : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本
  - 原因：win10默认禁用脚本
  - 解决：
    1. 在powershell中输入set-ExecutionPolicy RemoteSigned，选A
    2. 输入get-ExecutionPolicy，查看当前状态是否为RemoteSigned

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补充：点此处

命令	注释
`git remote -v`	显示远程仓库网址
`git remote remove 远程仓库名称`	删除远程仓库
`git remote add 仓库代号远程仓库网址`	增加远程仓库

跳转至vue总篇目录

chuck-Gemini

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Vue3.0组合式API（一）-----vite+vue初始化

一、简介Vue简介：Vue为web编程前端三大框架之一（Angular、React、Vue），中国人尤雨溪设计，设计理念以组件化开发为基本理念，强调可复用性Vue-cli简介：俗称脚手架，集成Vue所需环境配置，基本开发环境工具，号称0配置开发网址：官网网址点这里，菜鸟教程点这里二、初始配置2.1. vscode常用插件：略2.2 进入vscode终端运行命令：安装脚手架：npm install @vue/clinpm为node包管理器，node -v查看node
复制链接

扫一扫

专栏目录