本
文
摘
要
1. 创建项目包
在终端上面使用命令创建vue create 项目名 // 例如: vue create fristvue 或 vue create frist_vue (推荐使用这个命令规范)2. 在frist_vue文件中配置 vue.config.js 文件
具体代码作用见文章 Vue指南1 module.exprots = { lintOnSave : false, devServer : { open: true , port: 3000 } }3. 在frist_vue文件中 创建组件
src文件中 保留文件夹 components 删除内部内容在这个文件夹里放 子组件(文件后缀是 .vue 的文件)
可以自己创建一些vue文件 保留文件 App.vue 删除内部内容保留 标签
删除上述标签中的内容创建自己的组件上述保留的 App.vue 是父组件
子组件在 components 文件夹中
结果图:4. 配置组件连接
在 App.vue 引入子组件 第一步在<script>标签中 使用 import 变量名 from "子组件相对位置"<template> </template> <script> import TodoHeader from "./components/TodoHeader"; import TodoMain from "./components/TodoMain"; import TodoFooter from "./components/TodoFooter"; </script> <style> </style> 在 App.vue 引入子组件 第二步在<template> 标签中 创建一个根节点标签 可以是任一行内元素<template> <body> </body> </template>在 App.vue 引入子组件 第三步三种组件标签书写如下 都可以实现引入<template> <body> <TodoHeader></TodoHeader> <TodoMain /> <Todo-footer></Todo-footer> </body> </template>在 App.vue 引入子组件 第四步在export default(默认导出)中 设置 components 导出变量 以便在main.js 打包入口可以调用输出<script> import TodoHeader from "./components/TodoHeader"; import TodoMain from "./components/TodoMain"; import TodoFooter from "./components/TodoFooter"; export default { components: { TodoHeader: TodoHeader, TodoMain: TodoMain, TodoFooter: TodoFooter } } </script>5. 把组件传给打包系统
该功能的作用:是使 打包后的文件在出口文件中输出 可以把整个文件整合输出 到浏览器上跑
找到main.js文件写入import Vue from vue import App from ./App.vue待更中.......
更多使用vue(简单介绍一下vue)相关信息请关注本站,本文仅仅做为展示!