vue2.0-脚手架-todolist案例

最新推荐文章于 2025-05-06 10:38:55 发布

程序媛~~~

最新推荐文章于 2025-05-06 10:38:55 发布

阅读量560

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_57218747/article/details/118667339

版权

本文详细介绍了使用Vue2.0脚手架创建项目，包括Webpack的包查找机制、配置别名、todolist案例的实现过程。在todolist案例中，涉及静态页面组件化、数据初始化、添加、删除数据以及使用总线机制进行非父子组件间通信。文章还讨论了如何扩展需求，实现完成footer功能，清除已完成任务，并进行了收尾工作，包括本地存储的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 vue脚手架2.0

安装

npm install  vue-cli -g

查阅一下脚手架可支持的模板

 vue list
 可以查到 template-name

使用脚手架生成项目(以下命令得运行在项目的包裹目录下)

vue init webpack projectName

启动项目

1 进入到项目目录
2 启动开发环境：npm run dev  或者  npm start(开发环境)
3 启动生产环境：npm run bulid(生产打包)
4 自动启动chrom:在dev中加入： --open chrom

vue2.0脚手架的问题

没有办法让vue的开发者脱离对webpack的学习

不会webpack就不能学vue

比如项目中药使用eslint的强制约束，我们需要改动config目录下的showEslintErrorsInOverlay这个配置，而且在不同的webpack环境中 eslint的版本不一样 配置也会不一样!

我们急需vue推出一个脚手架 让vue的开发者远离webpack的配置!!! @vue/cli!!

vue.js完整版
new Vue({
   
        el:"#app",
        template: "<v-damu></v-damu>",
        components:{
   
            "v-damu":{
   
                template:"<strong>v-damu</strong>"
            }
        }
    })

// vue.runtime.js压缩版运行时的写法	
new Vue({
   
        el:"#app",
        render(h){
   return h("v-damu")},
        components:{
   
            "v-damu":{
   
                render(h){
   return h("strong","v-damu")},
            }
        }
    })

// h: 创建dom节点(参数是节点名字符串)  也 直接创建组件!!!!(参数是组件对象)
    new Vue({
   
        el:"#app",
        render(h){
   
            return h({
   
                name:"v-damu",
                render(h){
   return h("strong","v-damu")},
            })
        },
    })

二 webpack找包的机制

https://webpack.docschina.org/concepts/module-resolution

import App from "./App";
    经过vue-loader的处理 我们拿到的就是app组件的配置对象
import Vue from "vue";
    webpack找到的到底是一个什么样的文件?
        webpack import的规则?
            import Vue from "vue";

配别名的情况: "vue"是一个别名!!
直接找别名指定的文件

沒有配别名的情况: "vue"是一个包!!
1. 根据resolve.modules这个配置去指定的目录中查找vue这个包
2. 找包的描述文件package.json
3. 根据resolve.mainFields 去package.json找对应的字段
4. 如果以上步骤没有找到对应的js文件 则按照resolve.mainFiles字段指定的文件名 去找对应的文件
5. 文件的扩展名 由resolve.extensions来决定
6. 如果以上步骤都没有成功  那么webpack就找不到对应的包!

vue-loader .vue文件

三配别名：webpack.base.conf.js

 function resolve (dir) {
   
      return path.join(__dirname, '..', dir)
    }
    resolve: {
   
        alias: {
   
          "components":resolve('src/components')
        }
    }

scoped使用：css作用域

四 todolist案例

将静态页面拆分成静态组件

① 注意子组件的引入

② 静态资源一定要放在stasic中或者将静态资源作为模块引入；建议放在stasic，通过index.html的标签中引入

初始化静态页面

app.vue

<todo-list  :list="list"></todo-list>
data(){
   
   return {
   
      list:[
      {
   id:0,checked:true,name:"张三"},
      {
   id:1,checked:true,name:"李四"},
      {
   id:2,checked:true,name:"王五"},
      {
   id:3