一、安装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>
说明：在父组件中实际上还出传递了插槽内容，该插槽内容引用的方法可以直接是父组件中的，完全可以调用！
