常用的vue组件,组件vue文件必须有的要素有哪些
我最近浏览了vue。我发现了一个单一的文件组件，这个组件之前基本上被忽略了。所以本文详细介绍了vue单文件组件的实现，有一定的参考价值，有兴趣的朋友可以参考一下。
我最近浏览了vue。我发现了一个单一的文件组件，这个组件之前基本上被忽略了。vue.js中的单文件组件允许在一个文件中定义组件的所有内容。也就是说一个页面或者一个组件，我们想把它们绑定在一起，那么vue的这个单文件组件就可以做到。正如vue官网所说，“在很多Vue项目中，我们使用app.component定义全局组件，然后使用app . mount(# app)在每个页面中指定一个容器元素。”这里所有的组件都比较简单，但是面对一个比较复杂的项目，这种方法就不行了。原因如下：
全局定义强制每个组件中的名称不能重复；
字符串模板缺少语法突出显示。HTML中有多行的时候，难看\；
不支持CSS(不支持CSS)是指HTML和JavaScript组件化时，明显省略了CSS；
没有构建步骤，只能用HTML和ES5 JavaScript，不能用Pug等前置处理器。
(原名杰德)和巴别。
所有这些都可以通过扩展名为。vue，并且还可以使用webpack或Browserify等构建工具。
那么需要如何在vue项目中创建一个单文件组件呢？
构建
npm安装-D @ vue/编译器-sfc
在控制台上输入上面的代码，然后会出现一个文件夹和另一个json文件。如下所示：
如果我们想要构建一个单独的文件组件，我们必须创建自己的文件。同时，你必须对webpack有一定的了解。
例如，我们自己安装一些需要的依赖项。比如css-loader，css的预编译处理器等。因为项目需要解析vue文件，所以vue加载器是必要的。
这些文件实际上是vue的简单版本。例如，hello.vue文件的简单版本如下
由此可以看出，它由三部分组成。模板必不可少，另外两个部分，样式和脚本，可以忽略。
Script可以让你的页面js与vue完美结合，而style可以使用预处理器构建简洁且功能更多的组件。(这个单文件组件和原来前端开发中的html文档很像。它有自己的样式标签和脚本标签，但是表示层使用模板标签。由于方法简单，强大的分层组件(内容/模板：性能：
可能有些朋友喜欢拆分不同的模块，也就是vue文档中提到的关注点分离。那就无所谓了。您可以解包这些文档，将css和js解包到另一个文件中，然后将它们引入到组件中。如下所示：
！我的组件
模板
div这将是预编译的/div
/模板
脚本src=。/my-component.js/script
style src=。/my-component . CSS /样式
该项目的总目录如下：
其中，index.html
！声明文档类型
html lang=en
头
meta charset=utf-8 /
titleVue带SFC/title的简单待办事项应用程序
环
rel=样式表
href= https://cdnjs . cloud flare . com/Ajax/libs/normalize/8 . 0 . 1/normalize . min . CSS rel= external no follow rel= external no follow
/
link rel= style sheet href=/dist/main . CSS rel= external no follow rel= external no follow /
/头
身体
div id=app/div
script src=/dist/main . js /script
/body
/html
package.json
{
private :对，
脚本:{
dev: webpack-dev-server ，
build: webpack - env.prod
},
依赖项:{
^3.1.1
},
devDependencies: {
@vue/compiler-sfc: ^3.1.1
“CSS-loader”:^3.5.2，
“文件加载器”:^6.0.0，
迷你CSS-提取-插件:^0.9.0,
"铁笔":^0.54.7,
"唱针装载机":^3.0.2,
url-loader: ^4.1.0，
“vue-loader":^16.0.0-alpha.3，
“vue-style-loader":^4.1.2，
"网络背包":^4.42.1,
webpack-cli: ^3.3.11，
"网络包-开发-服务器":^3.10.3
},
关键字：[todo ， vue]，
name : vue-todo-list-app-with-single-file-component ，
描述："一个用某视频剪辑软件编写的简单的待办事项列表应用程序，支持单个文件组件(证监会).”
}
webpack.config.js
const path=require( path )；
const { VueLoaderPlugin }=require( vue-loader )；
const minicsetractplugin=require( mini-CSS-extract-plugin )；
module.exports=(env={})=({
模式：env.prod？生产:开发，
devtool: env.prod？源映射“:”廉价模块评估源映射，
条目：[
环境产品？假：要求。解析(` web pack-dev-server/client `)，
path.resolve(__dirname， ./src/main.js )
].过滤器（布尔型),
输出：{
path: path.resolve(__dirname， ./dist )，
公共路径："/dist/"
},
解决：{
别名：{
//这在技术上是不需要的，因为捆绑器的默认“vue”条目
//是一个简单的从“@ vue/runtime-DOM”中导出* .然而有了这个
//额外的重新导出会以某种方式导致工具总是使模块无效
//在第一次HMR更新时，使页面重新加载。
vue:"@ vue/runtime-DOM "
}
},
模块：{
规则：[
{
测试：/\。vue$/，
使用：“vue-loader”
},
{
测试：/\。巴布亚新几内亚美元/,
使用：{
加载程序："网址加载程序",
选项：{限制：8192 }
}
},
{
测试：/\。css$/，
使用：[
{
加载程序：minicsextractplugin。装载机，
选项：{ hmr:环境产品}
},
css-loader
]
},
{
测试：/\。手写笔$/,
使用：[vue-style-loader ， css-loader ， stylus-loader]
},
{
测试：/\。帕格$/,
装载机："平板装载机"
}
]
},
插件：[
new VueLoaderPlugin()，
新的minicsetractplugin({
文件名：[名称]。 css
})
],
devServer: {
inline: true，
热：真的，
统计："最小",
contentBase: __dirname，
叠加：真的，
injectClient: false，
disableHostCheck: true
}
});
test.html
！声明文档类型
html lang=en
头
meta charset=utf-8 /
titleVue带SFC/标题的简单待办事项应用程序
环
rel=样式表
href= https://cdnjs。云层耀斑。com/Ajax/libs/normalize/8。0 .1/正常化。量滴CSS rel=外部不跟随 rel=外部不跟随
/
link rel=样式表 href=/dist/main。CSS rel=外部不跟随 rel=外部不跟随/
/头
身体
div id=app222 测试页/div
脚本src=/dist/main。js /脚本
/body
/html
科学研究委员会文件夹里边有三个文件，App.vue main.js和TodoItem.vue
其中：App.vue
模板
div class=wrapper
氕我的待办事项列表/h1
form @submit.prevent=addTodo
input type= text name= todo-text v-model= New dotext placeholder= New todo
/表单
ul v-if=todos.length
todo项目v-for= todos中的 todo :key= todo。 id :todo= todo @ remove= remove todo /
/ul
列表中没有剩下任何东西。在上面的输入中添加一个新的待办事项./p
/div
/模板
脚本
从导入到项目 TodoItem.vue
设nextTodoId=1
const createTodo=text=({
文字，
id: nextTodoId
})
导出默认值{
组件：{
托多伊泰姆
},
data() {
返回{
todos: [
createTodo(Learn Vue )，
createTodo(了解单文件组件),
createTodo("爱上")
],
newTodoText:" "
}
},
方法：{
addTodo() {
const修剪文本=this。newdotext。修剪()
if (trimmedText) {
这个。托多斯。push(创建todo(修剪的文本))
}
this.newTodoText=
},
removeTodo(item) {
这个。todos=这个。托多斯。filter(todo=todo！==项目)
}
}
}
/脚本
style lang=stylus
*，*:之前，*:*之后
框尺寸边界框
html，正文
字体16px/1.2 blinkmasystemfont，-apple-system， Segoe UI ，Roboto，Helvetica，Arial，无衬线
填充10px。包装材料
宽度75%
边距0自动
形式
页边距-底部20px
输入[type=text]
宽度100%
填充10px
边框1px纯色#777
李
边距0
填充0
p .无
颜色#888
小号字体
/风格
main.js
从“vue”导入{ createApp }
从导入应用程序。/App.vue
createApp(应用程序)。挂载(#app)
TodoItem.vue
模板
里
span{{ todo.text }}/span
button @ click . prevent= $ emit( Remove ，todo)Remove/button
/李
/模板
脚本
导出默认值{
道具：{
待办事项：{
必填：真，
类型：对象
}
}
}
/脚本
style lang=stylus 范围
里
显示flex
边距5px 0
跨度
flex 1
按钮
边框1px纯橙色
背景橙色
颜色为白色
字体大小0.8雷姆
填充2px 4px
光标指针
:悬停
边框颜色#ff8100
背景#ff8100
/风格
注意
如果不了解webpack，建议根据官网说明，用vue脚手架安装基础工具。
或者按照我给的pakage.json放到项目上，npm安装，安装最基础的环境，然后你就可以通过npm run dev在本地开发了。
其实我觉得这个单文件组件用处不大。除非是纯js项目，而且用的库和组件都很老，那么这个时候用这个单文件组件开发新功能的效果还是不错的，前提是你熟悉vue。同时，我建议大家学习webpack。对bable一无所知，然后通过node启动项目。
实际上，使用一个文件来分层管理html/css/JavaScript，并将其统一到一个文件中，确实可以使我们的项目看起来更有组织性和标准化。因为在我们的jq时代，css经常混杂在html中，一个简单的点击事件就要把它们分开。这种体验当然没有“层层统治”那么清晰。
参考资料：
1.https://v3.cn.vuejs.org/guide/single-file-component.html#在线演示
2、https://www.cnblogs.com/houxianzhou/p/14510450.html
关于vue单文件组件实现的这篇文章到此为止。有关vue单文件组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。