文章目录创建一个vue项目(vue create方式)创建一个vue项目(简单版)(vue create方式)创建一个vue项目(vue init方式)(已废弃)创建一个vue项目(npm create vuelatest方式)(推荐)全局范围内安装vue新增一个页面npm run dev什么意思?code是什么意思查看vue版本vue2和vue3查看vue-router版本vue和vue router的对应关系vue的作用链路index.js创建vue应用main.jsindex.js和main.js的先后关系importexportexport default和exportexport new router是什么意思use方法一、插件化机制二、全局资源注册三、代码分离与复用四、增强可维护性清除缓存axios发送get请求axios发送post请求其他vite报错 vite 不是内部或外部命令也不是可运行的程序或批处理文件。javaScript和typeScript选哪个官网文档vue支持路径直接跳转吗?vue实现跳转vue2.0和3.0语法不同使用时一定要先看版本。现在主流都是用3.0这篇笔记不写版本了主要是3.0版本2.0版本见另外一篇笔记。创建一个vue项目(vue create方式)最常用和推荐的方式vue cli。1、打开一个终端(cmd或bash或vscode的terminal都可以)输入如下命令全局安装vue cli。npminstall-gvue/cli# 或者yarnglobaladdvue/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-gvue/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 vuelatest了。init命令示例vue init webpack my-project创建一个vue项目(npm create vuelatest方式)(推荐)现在最推荐的方式npmcreate vuelatest选项如下请输入项目名称# 输入 . 表示当前目录如果是需要创建文件夹则输入文件夹名请输入包名称# package.json是否使用TypeScript语法# No请选择要包含的功能(个/切换空格选择a全选回车确认)# 默认不勾选直接按enter即可。如果需要全部则按a再按回车。如果需要勾选某个按空格。选择要包含的试验特性(个/切换空格选择a全选回车确认)# 默认不勾选直接按enter即可跳过所有示例代码创建一个空白的 Vue项目# 默认是No直接按enter即可如图然后再执行安装和启动命令npm install npm run dev注上面交互窗口没勾选的后续如果想要了也可以单独安装如装router用npm install vue-router命令。全局范围内安装vuenpminstall-gvue/cli# 或者yarnglobaladdvue/cli新增一个页面很简单例如Product.vue1、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 vue2、在vue项目中运行应该是页面中国运行。console.log(Vue.version);3、bash 或者 vscode终端中输入vue --versionvue2和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-router3这个版本的 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-router4vue的作用链路main.js # 入口文件用来导入.vue模块。一般是App.vue当然也可以直接导入其他。vue模块是可以嵌套的。修改.vue的内容刷新界面就可以看到。index.jsindex.js示例。import{createRouter,createWebHistory}fromvue-router;constroutes[{path:/,name:about,},{path:/about,name:about,component:()import(./views/AboutView.vue)}]constroutercreateRouter({history:createWebHistory(),routes})exportdefaultrouter创建vue应用代码import{createApp}fromvue;importAppfrom./App.vue;importrouterfrom../src/index.jsconstappcreateApp(App);app.use(router);app.mount(#app);main.jsindex.js和main.js的先后关系是这样。vue.config.js index.html index.js main.js App.vue 渲染子组件。importimport主要用于导入其他模块、组件或库。为什么要导入呢?那么多模块如果不导入怎么知道用哪个总不能全都加载吧。语法import命名空间 from 模块。 # 语法importVuefromvue;# 示例常见的导入方式默认导入importVuefromvue;导入单个模块或组件import{ref,reactive}fromvue;将整个axios库导入为一个命名空间对象axiosimport*asaxiosfromaxios;动态import语法exportdefault{components:{AsyncComponent:()import(/components/AsyncComponent.vue)}}exportexport default和exportexport default用于导出模块中的默认成员。一个模块中只能有一个export default通常用于导出模块的主要功能或对象。导入时可以使用任意名称因为它没有具体的名称export用于导出模块中的多个成员每个成员都可以被单独导入。导入时必须严格按照导出时的名称使用花括号{}包裹—export defaultexport导出数量只能导出一个对象可以导出多个对象导入方式导入时可以使用任意名称因为默认导出没有具体的名称。 如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代码buttonclickfetchPosts获取数据/buttonscript代码exportdefault{name:YourComponent,data(){return{posts:[]};},mounted(){this.fetchPosts();},methods:{fetchPosts(){axios.get(https://jsonplaceholder.typicode.com/posts).then(response{// 处理响应数据this.postsresponse.data;}).catch(error{console.error(There was an error!,error);});}}}axios发送post请求template代码buttonclicksendPostRequest获取数据/buttonscript代码importaxiosfromaxios;exportdefault{name:YourComponent,methods:{sendPostRequest(){axios.post(请求地址,{}).then(response{// 请求成功时的处理逻辑console.log(response.data);}).catch(error{// 请求失败时的处理逻辑console.error(There was an error!,error);});}}}浏览器f12打开调试工具点获取数据可以看到发送了请求及结果。注methods里的方法要和按钮点击的方法一致。其他vitevite是一款推荐的vue管理工具。报错 ‘vite’ 不是内部或外部命令也不是可运行的程序或批处理文件。如果报这个错说明没有安装vite。安装vitenpminstallvite --save-devvite启动的项目是5173端口➜ Local: http://localhost:5173/ ➜ Network: use--hostto expose ➜ press h enter to showhelpjavaScript和typeScript选哪个javaScript是传统的。typeScript是新的有一定优点如果熟悉可以用。官网文档https://cn.vuejs.org/ # 推荐主要从这个网站拿资料vue支持路径直接跳转吗?支持例如输入http://localhost:8080/about如果如果没有跳转应该是路由有问题。vue实现跳转1、router-link。# 此处略见路由笔记。2、a标签函数。template处代码buttonclickgoToPage跳转到页面/buttonscript处代码exportdefault{methods:{goToPage(){this.$router.push(/about);// 使用push跳转// 或者使用replace跳转// this.$router.replace(/your-page-path);}}}
vue使用笔记、import、export等
文章目录创建一个vue项目(vue create方式)创建一个vue项目(简单版)(vue create方式)创建一个vue项目(vue init方式)(已废弃)创建一个vue项目(npm create vuelatest方式)(推荐)全局范围内安装vue新增一个页面npm run dev什么意思?code是什么意思查看vue版本vue2和vue3查看vue-router版本vue和vue router的对应关系vue的作用链路index.js创建vue应用main.jsindex.js和main.js的先后关系importexportexport default和exportexport new router是什么意思use方法一、插件化机制二、全局资源注册三、代码分离与复用四、增强可维护性清除缓存axios发送get请求axios发送post请求其他vite报错 vite 不是内部或外部命令也不是可运行的程序或批处理文件。javaScript和typeScript选哪个官网文档vue支持路径直接跳转吗?vue实现跳转vue2.0和3.0语法不同使用时一定要先看版本。现在主流都是用3.0这篇笔记不写版本了主要是3.0版本2.0版本见另外一篇笔记。创建一个vue项目(vue create方式)最常用和推荐的方式vue cli。1、打开一个终端(cmd或bash或vscode的terminal都可以)输入如下命令全局安装vue cli。npminstall-gvue/cli# 或者yarnglobaladdvue/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-gvue/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 vuelatest了。init命令示例vue init webpack my-project创建一个vue项目(npm create vuelatest方式)(推荐)现在最推荐的方式npmcreate vuelatest选项如下请输入项目名称# 输入 . 表示当前目录如果是需要创建文件夹则输入文件夹名请输入包名称# package.json是否使用TypeScript语法# No请选择要包含的功能(个/切换空格选择a全选回车确认)# 默认不勾选直接按enter即可。如果需要全部则按a再按回车。如果需要勾选某个按空格。选择要包含的试验特性(个/切换空格选择a全选回车确认)# 默认不勾选直接按enter即可跳过所有示例代码创建一个空白的 Vue项目# 默认是No直接按enter即可如图然后再执行安装和启动命令npm install npm run dev注上面交互窗口没勾选的后续如果想要了也可以单独安装如装router用npm install vue-router命令。全局范围内安装vuenpminstall-gvue/cli# 或者yarnglobaladdvue/cli新增一个页面很简单例如Product.vue1、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 vue2、在vue项目中运行应该是页面中国运行。console.log(Vue.version);3、bash 或者 vscode终端中输入vue --versionvue2和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-router3这个版本的 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-router4vue的作用链路main.js # 入口文件用来导入.vue模块。一般是App.vue当然也可以直接导入其他。vue模块是可以嵌套的。修改.vue的内容刷新界面就可以看到。index.jsindex.js示例。import{createRouter,createWebHistory}fromvue-router;constroutes[{path:/,name:about,},{path:/about,name:about,component:()import(./views/AboutView.vue)}]constroutercreateRouter({history:createWebHistory(),routes})exportdefaultrouter创建vue应用代码import{createApp}fromvue;importAppfrom./App.vue;importrouterfrom../src/index.jsconstappcreateApp(App);app.use(router);app.mount(#app);main.jsindex.js和main.js的先后关系是这样。vue.config.js index.html index.js main.js App.vue 渲染子组件。importimport主要用于导入其他模块、组件或库。为什么要导入呢?那么多模块如果不导入怎么知道用哪个总不能全都加载吧。语法import命名空间 from 模块。 # 语法importVuefromvue;# 示例常见的导入方式默认导入importVuefromvue;导入单个模块或组件import{ref,reactive}fromvue;将整个axios库导入为一个命名空间对象axiosimport*asaxiosfromaxios;动态import语法exportdefault{components:{AsyncComponent:()import(/components/AsyncComponent.vue)}}exportexport default和exportexport default用于导出模块中的默认成员。一个模块中只能有一个export default通常用于导出模块的主要功能或对象。导入时可以使用任意名称因为它没有具体的名称export用于导出模块中的多个成员每个成员都可以被单独导入。导入时必须严格按照导出时的名称使用花括号{}包裹—export defaultexport导出数量只能导出一个对象可以导出多个对象导入方式导入时可以使用任意名称因为默认导出没有具体的名称。 如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代码buttonclickfetchPosts获取数据/buttonscript代码exportdefault{name:YourComponent,data(){return{posts:[]};},mounted(){this.fetchPosts();},methods:{fetchPosts(){axios.get(https://jsonplaceholder.typicode.com/posts).then(response{// 处理响应数据this.postsresponse.data;}).catch(error{console.error(There was an error!,error);});}}}axios发送post请求template代码buttonclicksendPostRequest获取数据/buttonscript代码importaxiosfromaxios;exportdefault{name:YourComponent,methods:{sendPostRequest(){axios.post(请求地址,{}).then(response{// 请求成功时的处理逻辑console.log(response.data);}).catch(error{// 请求失败时的处理逻辑console.error(There was an error!,error);});}}}浏览器f12打开调试工具点获取数据可以看到发送了请求及结果。注methods里的方法要和按钮点击的方法一致。其他vitevite是一款推荐的vue管理工具。报错 ‘vite’ 不是内部或外部命令也不是可运行的程序或批处理文件。如果报这个错说明没有安装vite。安装vitenpminstallvite --save-devvite启动的项目是5173端口➜ Local: http://localhost:5173/ ➜ Network: use--hostto expose ➜ press h enter to showhelpjavaScript和typeScript选哪个javaScript是传统的。typeScript是新的有一定优点如果熟悉可以用。官网文档https://cn.vuejs.org/ # 推荐主要从这个网站拿资料vue支持路径直接跳转吗?支持例如输入http://localhost:8080/about如果如果没有跳转应该是路由有问题。vue实现跳转1、router-link。# 此处略见路由笔记。2、a标签函数。template处代码buttonclickgoToPage跳转到页面/buttonscript处代码exportdefault{methods:{goToPage(){this.$router.push(/about);// 使用push跳转// 或者使用replace跳转// this.$router.replace(/your-page-path);}}}
