文章目录
- 前言
- 一、安装vue-cli脚手架
- 二、熟悉Vue-cli开发方式
- 三、Vue-cli开发todolist(组件形式)
- 参考资料
前言
本篇博客是在vue-cli的学习笔记，若文章中出现相关问题，请指出！
- 当前该链接失效了，有需要的小伙伴可以去b站或者技术胖官网去找相应的视频与笔记。
所有博客文件目录索引：博客目录索引(持续更新)
一、安装vue-cli脚手架
删除老的脚手架：npm uninstall -g vue-cli
安装最新的脚手架到全局：npm install -g @vue/cli
执行vue命令来创建脚手架
创建工程：vue create 项目名称。
- 若是没有该vue的命令，找到你的vue-cli安装路径，并添加环境变量：
D:\nodejs\installnpm\npm，即可使用！
若是要自定义一些配置的话如vue-router等，需要手动选择特征
启动工程：npm run serve
二、熟悉Vue-cli开发方式
main.js
// Vue实例中拿到createApp方法
import { createApp } from 'vue'
// 导入组件
import App from './App.vue'
// 将App组件挂载至id=app的div标签上
createApp(App).mount('#app')
vue文件
<!-- 组件模板：视图 -->
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="My name is ChangLu!" />
</template>
<!-- 行为 -->
<script>
// 导入组件
import HelloWorld from "./components/HelloWorld.vue";
//导出组件
export default {
//组件的名称为App
name: "App",
//接收组件
components: {
HelloWorld,
},
};
</script>
<!-- 样式 -->
<!-- 原本不添加scoped就是全局样式；若是添加了scoped之后，只能作用当前组件使用(以及在本组件中应用的子组件) -->
<style scoped>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1 {
background-color: red;
}
</style>
三、Vue-cli开发todolist(组件形式)
需求：使用Vue-cli脚手架开发todolist，其中li标签通过使用组件的形式呈现。
实现：
App.vue
<template>
<input ref="myinput" type="text" v-model="inputval" />
<button @click="handleClick">提交</button>
<ul>
<item v-for="(item, index) in itemArr" :key="index" :msg="item">
<button @click="handleDel(index)">删除</button>
</item>
</ul>
<!-- <div>{{ inputval }}</div> -->
</template>
<script>
// 导入组件(不管是Vue实例还是其他组件都要以import的方式导入，而不像之前全局变量Vue类中来获取到Vue的函数方法)
import { ref, reactive } from "vue";
import item from "./components/item.vue";
export default {
name: "App",
setup() {
let inputval = ref("");
const itemArr = reactive([]);
// 提交数据
const handleClick = () => {
itemArr.push(inputval.value);
inputval.value = "";
};
//删除指定记录
const handleDel = (index) => itemArr.splice(index, 1);
return { inputval, itemArr, handleClick, handleDel };
},
mounted() {
this.$refs.myinput.focus();
},
components: { item },
};
</script>
<style >
button {
margin-left: 20px;
}
</style>
item.vue
<template>
<li>
{{ msg }}
<slot></slot>
</li>
</template>
<script>
export default {
// 组件名称
name: "item",
props: ["msg"],
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
说明：在父组件中实际上还出传递了插槽内容，该插槽内容引用的方法可以直接是父组件中的，完全可以调用！
参考资料
[1]. vue-cli入门项目实战(超详细)
我是长路，感谢你的耐心阅读。如有问题请指出，我会积极采纳！
欢迎关注我的公众号【长路Java】，分享Java学习文章及相关资料
Q群：851968786 我们可以一起探讨学习
注明：转载可，需要附带上文章链接
