vue使用笔记、import、export等

vue2.0和3.0语法不同，使用时一定要先看版本。
现在主流都是用3.0，这篇笔记不写版本了，主要是3.0版本，2.0版本见另外一篇笔记。

创建一个vue项目(vue create方式)

最常用和推荐的方式vue cli。
1、打开一个终端(cmd或bash或vscode的terminal都可以)，输入如下命令全局安装vue cli。

npminstall-g@vue/cli# 或者yarnglobaladd@vue/cli

注：全局安装@vue/cli必不可少，否则vue命令无法识别。

2、创建一个vue项目。

创建带文件夹的项目： vue create 实际的项目名 在当前项目下创建： vue create.忽略git(实测带git很慢，建议忽略掉)(推荐)： vue create.--no-git

里面可以有很多选项，也可以一路回车全用默认选项。

3、打开项目。

code.# 是一个命令行工具，用于快速打开 VS Code 并执行一些与代码相关的操作。或 在vscode中打开该项目的文件夹

创建一个vue项目(简单版)(vue create方式)

npm-v# 查看版本号npminstall-g@vue/cli# 安装vue clivue create vue-test --no-git# 创建vue项目cdvue-testnpmrun serve# 运行，注：这里是serve不是server，可别写错了浏览器输入如下地址(两个都可以)： http://localhost:8080 http://192.168.0.193:8080/

创建一个vue项目(vue init方式)(已废弃)

非常不推荐，见到init知道有这么回事就行了，现在都用npm create vue@latest了。

init命令示例：

vue init webpack my-project

创建一个vue项目(npm create vue@latest方式)(推荐)

现在最推荐的方式：

npmcreate vue@latest

选项如下：

请输入项目名称# 输入 . 表示当前目录，如果是需要创建文件夹则输入文件夹名请输入包名称# package.json是否使用TypeScript语法# No请选择要包含的功能(个/切换，空格选择，a全选，回车确认)# 默认不勾选，直接按enter即可。如果需要全部，则按a，再按回车。如果需要勾选某个，按空格。选择要包含的试验特性(个/切换，空格选择，a全选，回车确认)# 默认不勾选，直接按enter即可跳过所有示例代码，创建一个空白的 Vue项目# 默认是No，直接按enter即可

如图：

然后再执行安装和启动命令：

npm install npm run dev

注：上面交互窗口没勾选的，后续如果想要了，也可以单独安装，如装router用npm install vue-router命令。

全局范围内安装vue

npminstall-g@vue/cli# 或者yarnglobaladd@vue/cli

新增一个页面

很简单，例如Product.vue：
1、views新建Product.vue文件。
2、index.js里添加路由内容。

npm run dev什么意思?

如package.json里scripts的内容：

"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},

相当于命令别名。
npm run dev | 根据这个dev找到vite，相当于直接调用vite命令。

code是什么意思

code是一个命令行工具，用于快速打开 VS Code 并执行一些与代码相关的操作。
code .和 从vscode直接打开是一样的。

查看vue版本

不止一种方法。
1、npm list vue

2、在vue项目中运行，应该是页面中国运行。
console.log(Vue.version);

3、bash 或者 vscode终端中输入：
vue --version

vue2和vue3

不同版本类库不一样，在此不细述，涉及到具体功能最好两个版本用法都列上。

查看vue-router版本

npm list vue-router # npm这个命令比较通用

vue和vue router的对应关系

Vue 2.x 和 Vue Router 3.x：

在 Vue 2.x 中，您应该使用 Vue Router 3.x。
如果您使用 Vue 2.x，可以通过以下方式安装对应的 Vue Router 版本：
npm install vue-router@3
这个版本的 Vue Router 允许您创建单页应用的路由，实现不同 URL 访问不同内容的功能。
Vue 3.x 和 Vue Router 4.x：

在 Vue 3.x 中，您应该使用 Vue Router 4.x。
如果您使用 Vue 3.x，可以通过以下方式安装对应的 Vue Router 版本：
npm install vue-router@4

vue的作用链路

main.js # 入口文件，用来导入.vue模块。一般是App.vue，当然也可以直接导入其他。

vue模块是可以嵌套的。

修改.vue的内容，刷新界面就可以看到。

index.js

index.js示例。

import{createRouter,createWebHistory}from'vue-router';constroutes=[{path:"/",name:"about",},{path:"/about",name:"about",component:()=>import('./views/AboutView.vue')}]constrouter=createRouter({history:createWebHistory(),routes})exportdefaultrouter

创建vue应用

代码：

import{createApp}from'vue';importAppfrom'./App.vue';importrouterfrom'../src/index.js'constapp=createApp(App);app.use(router);app.mount('#app');

main.js

index.js和main.js的先后关系

是这样。
vue.config.js > index.html > index.js > main.js > App.vue > 渲染子组件。

import

import主要用于导入其他模块、组件或库。

为什么要导入呢?
那么多模块，如果不导入怎么知道用哪个，总不能全都加载吧。

语法

import命名空间 from 模块。 # 语法importVuefrom'vue';# 示例

常见的导入方式

默认导入：importVuefrom'vue';导入单个模块或组件：import{ref,reactive}from'vue';将整个axios库导入为一个命名空间对象axios‌：import*asaxiosfrom'axios';动态import语法：exportdefault{components:{AsyncComponent:()=>import('@/components/AsyncComponent.vue')}}

export

export default和export

export default‌：用于导出模块中的默认成员。一个模块中只能有一个export default，通常用于导出模块的主要功能或对象。导入时可以使用任意名称，因为它没有具体的名称‌

‌export‌：用于导出模块中的多个成员，每个成员都可以被单独导入。导入时必须严格按照导出时的名称使用花括号{}包裹‌

—	export default	export
导出数量	只能导出一个对象	可以导出多个对象
导入方式	导入时可以使用任意名称，因为默认导出没有具体的名称。 如：import myDefault(可以替换为任意名称) from ‘./myModule’;‌	导入时必须严格按照导出时的名称使用花括号{}包裹。如：import {str1, str2} from ‘./myModule’;‌

export new router是什么意思

如：

exportdefaultnewRouter({routes:[{path:'/mynewpage',// 你的新页面路径name:'MyNewComponentName',// 路由名称（可选）component:MyNewComponentName// 对应组件的引用}]});

猛一看不容易理解，其实换个方式就明白了。

exportdefaultconstaaa="";# 导出常量exportdefaultfunctionaaa(){}};# 导出函数exportdefaultnewRouter({内容略});# 导出路由

export用来导出对象，可以是常量、函数、或其他对象，当然也包括路由。

use方法

为什么要显式的用use呢?

一、插件化机制

Vue 的 use 方法是插件化机制的核心之一，它允许开发者将一些通用功能封装成插件，并在不同的项目中轻松复用。插件可以包含组件、指令、过滤器和实例方法等多种资源，通过 use 方法，这些资源可以全局注册，从而在应用的任何部分中使用。插件化机制带来了以下几个好处：

高复用性：将通用功能封装成插件后，可以在多个项目中复用，避免重复开发。
便于维护：插件独立于具体项目，当插件功能需要更新时，只需更新插件代码即可，无需修改项目代码。
模块化开发：通过插件化开发，项目代码结构更加清晰，模块之间的耦合度降低。

二、全局资源注册

使用Vue.use 方法可以方便地将全局资源（如组件、指令、过滤器等）注册到 Vue 实例中。这样一来，这些资源就可以在整个应用中随处使用，而无需在每个组件中单独引入和注册。以下是全局资源注册的具体优势：

简化引入过程：通过 use 方法全局注册资源后，开发者无需在每个组件中重复引入和注册，简化了开发过程。
统一管理：全局资源的注册和管理变得更加集中和统一，便于维护。
一致性：确保整个应用中的资源使用一致，避免因不同组件中资源版本不一致而导致的问题。

三、代码分离与复用

通过 Vue.use 方法，可以将一些常用的功能模块化，并封装成独立的插件，从而实现代码分离与复用。这对于大型项目尤为重要，可以显著提升开发效率和代码的可维护性。以下是代码分离与复用的具体做法：

封装插件：将通用功能（如数据处理、API 封装、UI 组件等）封装成独立插件。
使用 use 方法注册插件：在项目入口文件中使用 Vue.use 方法注册插件，使其在整个应用中可用。
在项目中引用插件功能：在项目的各个组件中，可以直接调用插件提供的功能，而无需关心其内部实现。

四、增强可维护性

使用 Vue.use 方法可以显著增强项目的可维护性。通过插件化开发，将不同的功能模块分离开来，降低了各模块之间的耦合度，使得代码更加易于理解和维护。以下是增强可维护性的具体方法：

模块化开发：将项目拆分为多个独立的模块，每个模块负责特定的功能，通过 use 方法将模块注册到 Vue 实例中。
独立更新：插件独立于项目，当插件功能需要更新时，只需更新插件代码即可，无需修改项目代码。
提高代码可读性：通过模块化开发和插件化机制，使得项目结构更加清晰，代码更易于阅读和理解。

清除缓存

见npm笔记

axios发送get请求

template代码：

<button@click="fetchPosts">获取数据</button>

script代码：

exportdefault{name:'YourComponent',data(){return{posts:[]};},mounted(){this.fetchPosts();},methods:{fetchPosts(){axios.get('https://jsonplaceholder.typicode.com/posts').then(response=>{// 处理响应数据this.posts=response.data;}).catch(error=>{console.error("There was an error!",error);});}}}

axios发送post请求

template代码：

<button@click="sendPostRequest">获取数据</button>

script代码：

importaxiosfrom'axios';exportdefault{name:'YourComponent',methods:{sendPostRequest(){axios.post('请求地址',{}).then(response=>{// 请求成功时的处理逻辑console.log(response.data);}).catch(error=>{// 请求失败时的处理逻辑console.error('There was an error!',error);});}}}

浏览器f12打开调试工具，点获取数据可以看到发送了请求及结果。

注：methods里的方法要和按钮点击的方法一致。

其他

vite

vite是一款推荐的vue管理工具。

报错 ‘vite’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

如果报这个错，说明没有安装vite。

安装vite：

npminstallvite --save-dev

vite启动的项目是5173端口：

➜ Local: http://localhost:5173/ ➜ Network: use--hostto expose ➜ press h + enter to showhelp

javaScript和typeScript选哪个

javaScript是传统的。
typeScript是新的，有一定优点，如果熟悉可以用。

官网文档

https://cn.vuejs.org/ # 推荐，主要从这个网站拿资料

vue支持路径直接跳转吗?

支持，例如输入http://localhost:8080/about，如果如果没有跳转应该是路由有问题。

vue实现跳转

1、router-link。# 此处略，见路由笔记。
2、a标签+函数。
template处代码：

<button@click="goToPage">跳转到页面</button>

script处代码：

exportdefault{methods:{goToPage(){this.$router.push('/about');// 使用push跳转// 或者使用replace跳转// this.$router.replace('/your-page-path');}}}