vue实现todo功能（一）：搭建vue-webpack环境

前言

我最开始因为项目原因接触的是react，对于我这种美观狂而言，react中难以调解的css让我十分抓狂，说是在写页面，因为不能写自己的样式，像是在拼凑页面，没意思。于是我开始了解vue这种将css html javacript融合在一起写，非常爽！！

todo-list可以说是每个项目的入门最佳方式，涉及到数据的增删查改，想做大一点还可以涉及到缓存数据库等等，非常适合新人入手。

反正我学会了hhhh

资源推荐

学习视频：imooc
源代码：Github-todo star！！！谢谢，开心！！

开始

在开始进行vue开发的时候我们需要配置基础的node环境和vue包

npm i vue-cli -g

安装完成后我们就可以初始化项目了

vue init


这时候我们会看到：
  Usage: vue-init <template-name> [project-name]

  Options:

    -c, --clone  use git clone
    --offline    use cached template
    -h, --help   output usage information
  Examples:

    # create a new project with an official template
    $ vue init webpack my-project

    # create a new project straight from a github template
    $ vue init username/repo my-project

这个帮助信息意思是在进行vue init的时候，要确立template-name和projectname 什么意思呢？看他的Examples写的很清楚。

好了，我们根据提示创建一个webpack-simple包

vue init webpack-simple untitle3

这就是我们生成的一个简易webpack-vue文件目录

跑起来

如何把文件跑起来呢？我们可以直接看他package.json的script

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

第一行dev是运行的意思，第二行build是构建静态资源，我们通过dev启动服务

npm run dev

已经成功了！！！

下一篇：组件嵌套与组件传参

催更Q：516764216