Vue Cli 脚手架
讲解VueCli3.x从安装到应用
人保雷佳音
91后,硕士研究生,阿里云云计算高级架构师。
展开
-
【VueCli脚手架】——第八章自定义脚手架
一、新建vue脚手架 切换到文件目录,使用如下命令vue create vuecli_myown二、选择Manually select features三、选择所需要的模板及插件四、保存自定义的脚手架模板五、使用保存的脚手架 下次再生成新的脚手架文件时,可以选择之前保存的模板...原创 2020-07-12 13:05:32 · 500 阅读 · 0 评论 -
【VueCli脚手架】——第七章动态组件和缓存
一、定义三个子组件FormOne.vue、FormTwo.vue分别调用FormHelper,并在FormHelper中使用slot插槽占位FormHelper.vue如下<template> <div> <h1>填充以下表单内容</h1> <form> <div id="form-header"> <slot name="form-header"><.原创 2020-07-07 20:19:44 · 356 阅读 · 0 评论 -
【VueCli脚手架】——第六章slot插槽的使用
一、定义新的组件 定义新的空的组件,名为FormHelper.vue<template></template><script>export default { data() { return { }; }};</script><style scoped></style>二、在App.vue中注册组件并使用<template> <div id="ap...原创 2020-07-07 10:16:10 · 781 阅读 · 0 评论 -
【VueCli脚手架】——第五章在子组件中修改父组件的属性
一、在子组件中注册事件 基于上一章的子组件Header.vue,绑定click事件<template> <div @click="changeTitle" class="header"> <h1>{{title}}</h1> </div></template>在script标签中注册事件titleChange methods: { changeTitle() { this...原创 2020-07-06 10:01:36 · 348 阅读 · 0 评论 -
【VueCli脚手架】——第四章从父组件向子组件传值和传引用
一、在父组件App.vue中定义属性和数组 data() { return { users: [ { name: "Jack", age: 18, show: false }, { name: "Tom", age: 19, show: false }, { name: "David", age: 19, show: false }, { name: "Lucy", age: 18, show: false }原创 2020-07-06 09:09:37 · 941 阅读 · 0 评论 -
【VueCli脚手架】——第三章嵌套多个组件
一、在components下新建组件 新建Header.vue、Users.vue、Footer.vue二、定义新建的组件在Header.vue中定义如下<template> <div class="header"> <h1>{{title}}</h1> </div></template><script>export default { data() { re...原创 2020-07-03 15:30:12 · 614 阅读 · 0 评论 -
【VueCli脚手架】——第二章搭建项目
一、新建项目 新建项目文件夹,通过命令行切换到该目录下,执行以下命令创建项目名称vue create vuecli_projects 项目创建成功如下图二、启动项目 切换到新项目路径并启动项目cd vuecli-demonup rum serve项目启动成功详见下图三、浏览器访问项目 在浏览器中键入http://localhost:8080/...原创 2020-07-01 09:03:28 · 134 阅读 · 0 评论 -
【VueCli脚手架】——第一章安装脚手架
一、先安装基础环境node.js 在https://nodejs.org/zh-cn/ 中下载稳定版,并一键安装。二、验证环境版本 在命令行中,输入node-v和npm -v 三、配置国内npm下载源npm install -g cnpm --registry=http://registry.npm.taobao.org 四、通过国内镜像安装vue-clicnpm install -g @vue/cli五、版本验证vue -...原创 2020-06-30 20:44:37 · 150 阅读 · 0 评论