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