简易购物网站前端模板,专业外贸网站建设公司价格,996工作制是什么意思,刷seo快速排名我们为什么要组件化开发#xff1f;
在之前的vue中#xff0c;我们要么是通过本地引入vue.js进行开发#xff0c;要么就是通过CLI#xff08;脚手架#xff09;来创建环境然后单独在App.vue中进行开发#xff0c;这样的开发模式当然没有问题#xff0c;但是当项目庞大起…我们为什么要组件化开发
在之前的vue中我们要么是通过本地引入vue.js进行开发要么就是通过CLI脚手架来创建环境然后单独在App.vue中进行开发这样的开发模式当然没有问题但是当项目庞大起来后将所有的组件data,methods等等选项式组件放在一个文件中进行开发是很不理智的后期维护的成本巨大是毋庸置疑的同时文件庞大带来的首页渲染问题该如何解决呢向服务器申请网页源码所花费的时间提升也不利于用户的体验当然还有命名上同名的情况即使可以设置不同的作用域但会造成代码的冗余不利于优化。
所以我们将不同的组件抽离出来写在不同文件中这样可以让每个部分各司其职而且最重要的是这大大提升了组件的复用性我们把写好的组件写好作为类似ppt模板的东西当我们需要在某个地方使用这个组件时只需要导入并注册一下这个组件就可以而不需要去思考其他逻辑。简单来讲组件化开发把过去混杂在一起的代码模式转变成了如拼图一般的代码模式。当然组件化开发产生了文件的分离这使得如果要构建的组件间的通信也不如之前同一文件下简单。总的来说组件化除了难一些以外基本上优于过去的编程模式。
组件化开发如何部署环境
为了部署vue组件化开发的环境我们一般采用脚手架也就是CLI在使用脚手架之前我们得确保nodejs的配置找到nodejs官网后根据自己设备选择合适的安装包后一路next就可以了。
在安装CLI中我们会使用到nodejs中的npm当然也可以使用pnpm这个更新一点但是好像得自己配环境这个看其他的pnpm配置文章就可以了。这里就用npm了。
检查你的前置条件是否满足
打开命令窗口(winR) 键入 npm -v 顺便检查一下nodejs:键入 node -v 都没出问题的话就可以安装脚手架了有问题重装一下nodejs。进入Vue CLI我们可以有两种方法来配置环境第一种就是通过webpack来部署这个方法是默认的。第二种方法是使用vite来配置这个速度更快只要1.1s左右比webpack快2s除了速度使用vite也是一种趋势有时间可以学学vite方法这里就用webpack的方式。 可以看到官方推荐使用Vite来创建自己的项目但本文还是采用下方传统的方式
键入
npm install -g vue/cli 下完后验证一下是否安装成功: 键入 vue -V 有其版本号就说明安装成功如果显示没有vue这个命令的话也不要紧可以手动进入nodejs中寻找一下vue.exe把路径拷到环境变量PATH中即可。
接下来就是最后一步
首先你得有个放工程的文件夹我这里用test来举例了用的vscode这个可以在命令窗口完成但前提是你之前的脚手架是装在全局下的也就是没切过路径的情况下:
进入vscode终端 cd到test文件夹中键入 vue create beginner(项目名称) 接下来选择vue的版本和一些部件对于新手来说只要个babel 就可以了其他的对入门不是很有必要。
其他的选项都随意vue的版本看你需求。我还是推荐vue3毕竟有composition API挺好用的。
创建完就是一坨文件我这里就不讲那些配置文件了主要就是两个命令用来启动项目
cd beginner这个看你自己的项目名
npm run serve
以上在创完项目会提示的。
基本的界面介绍
其次就是src文件夹了这就是写网页写功能的地方。 components文件夹一般放组件要不说组件化开发呢App.vue就是根组件是最大的组件其他组件都写依附在它身上本质上还是组件。main.js是程序的入口一般就写些根组件的配置。 一般这些代码都不会变直接当套路就行了其实作用也就等同于
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp/divscript src../static/vue.js/scriptscriptconst app Vue.createApp({)app.mount(#app)/script/body/html 组件化的注册与使用
到此为止基本的环境我们已经设定好了接下来就可以引入本文正文了对于组件的注册我们有两种方式
全局注册用的较少局部注册用的很多
全局注册顾名思义就是在根组件中进行注册在任何子组件中都可以使用。
局部注册指必须在某个子组件中注册后才可以使用。 为什么全局注册用的很少
如果组件进行全局注册后那么它可以在任何地方使用这难道不是让操作更加方便了
其实不然全局注册后的组件即使未被使用在打包时也会占据空间而且这也不利于理解组件间的嵌套关系所以只有在必要的时候才会使用全局注册。 全局注册 import { createApp } from vue
import App from ./01_vue嵌套关系/components/App.vue
import student from ./01_vue嵌套关系/components/student.vueconst app createApp(App);
app.component(student-info, student);
app.mount(#app);以上为main.js的内容我们调用app中的component方法第一个参数为自定义组件名称第二给参数为组件的模板以及逻辑。当然你也可以直接把模板和逻辑直接写在第二个参数中。 局部注册
局部注册其实更好理解因为它更符合组件树的概念接下来用一个例子来解释。
App.vue文件
template
h2{{ title }}/h2
student/student
/templatescript
import student from ./student.vueexport default{components:{student},data(){return{title:我是标题}}}
/scriptstyle
h2{color:black;
}
/stylestudent.vue文件
templatep姓名:{{name}}/pp班级:{{class}}/pp学号:{{ID}}/p
/templatescript
export default {data(){return{name:Mike,class:7,ID:001}}
}
/scriptstyle/style
在上面例子中我们在App.vue根组件中首先导入了student组件然后在components中局部注册student组件components是新的选项式api后面还会有更多props,emits,生命周期函数等等。在局部注册后我们就可以使用这个组件了关于组件命名问题横短线命名法和驼峰命名法都是可以的它们可以互相转化例如“MyBanner” -- “my-banner” 组件与组件之间相互独立在使用组件时不必担心命名重复或者逻辑冲突的问题但在后面组件之间相互通信需要注意这类情况。
