Vue系統學習(一) vue-cli3 創建項目並簡單實現list增加刪除功能

其實很早就把這幾個demo代碼寫完了(可參照github提交時間)，現在想着把對應操作的博客給補起來, 代碼全部託管在 github : https://github.com/wgPython/vue_study_demo

首先看實現效果

一 vue-cli 3 創建項目

注意我是用的vue-cli3 , 可以參照官網如何安裝： https://cli.vuejs.org/zh/guide/installation.html
我個人人爲相對vue-cli 2 ， 3創建項目更加人性化了，我基本沒有花時間去了解webpack打包

# npm 指定淘寶鏡像 加快包下載速度
npm config set registry https://registry.npm.taobao.org
# 不想用可以還原
# npm config set registry https://registry.npmjs.org 
# 安裝最新的vue-cli
npm install -g @vue/cli     # npm 自行查閱如何安裝
# OR
yarn global add @vue/cli
# 查看版本
vue --version    # 3.x.x
# 創建項目 
vue create demo3   # 或者 vue ui  # 這種會出現一個圖形化界面 可參
# 可參考 https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

創建項目輸入完回車, 就會出現選擇界面 我們選擇手動

然後回車選擇 預先設置好的配置 比如vuex Router, 這是我需要的設置
空格選中， 全部選擇完後 回車下一步

下一步，我基本就是一路next

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
這一步我選擇的paakage.json 因爲我熟悉過vue-cli2， 對這個文件目錄稍微熟悉點

我安裝完後就是這樣的

等待安裝完畢 啓動項目

cd demo1
yarn serve   # 可以看一下pacakge.json serve 對應執行 vue-cli-service serve

按照命令行提示網址 http://localhost:8080/#/ 瀏覽器裏面 就可以看到 歡迎界面了 是不是很簡單更人性化了我反正認爲工具更高級之後，使用起來肯定是更方便的， 否則尤雨希不會搞這事的。當然用最新的方便的工具可能就要挨最毒的打，因爲新的東西可能有別人沒踩過的坑，這也是新技術的通病。

二 實現簡單頁面

前提：你應該掌握了vue的基本寫法， v-if v-model等，還有組件的使用等等
涉及到的技術點: Element-UI vue-router

# 安裝Element-UI  參考:http://element-cn.eleme.io/#/zh-CN/component/quickstart
cd demo1   # 首先進入你的項目下
npm i element-ui -S   # 命令安裝
npm install --save element-ui   # 可能需要這樣  npm 建議指定到 淘寶鏡像源 
# 配置你的src/main.js文件     src 文件夾是我們的主文件夾，代碼全寫在這裏
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';    # 新加
import 'element-ui/lib/theme-chalk/index.css';     # 新加

Vue.use(ElementUI)   # 新家掛載
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

• 創建視圖
  在src/views 創建 一個新vue 名字爲ListOne文件, 我用的webstorm IDE自動創建,格式如下

<template>
    
</template>

<script>
    export default {
        name: 'ListOne',
        data() {
            return {}
        }
    }
</script>

<style scoped>

</style>

然後實現功能，代碼很簡單，我就不在這裏貼代碼了 可以去我的 github 上查看

實現邏輯一
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/views/ListOne.vue
定義了一個組件內局部變量名list_info爲 list類型， 然後和input框雙向綁定，點擊確定按鈕就添加到list_info, 同時li 標籤也在遍歷 list_info，爲每個list綁定一個click方法刪除， 參考代碼，基本看一眼就懂了。
實現邏輯二
使用組件的方式，需要創建一個子組件，代碼如下
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/components/TodoItem.vue
在創建一個 view文件 ListTwo
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/views/ListTwo.vue
重點說下 就是用到了 props 父子組件傳值， $emit 內置函數回調，比邏輯一稍微高級一些

路由控制

簡單使用不難，高級的我目前沒怎麼用
直接在 src / router.js 下配置即可
https://github.com/wgPython/vue_study_demo/blob/master/demo1/src/router.js
然後再重新自動啓動 http://localhost:8080/#/listone 下查看效果

總結

• 到這裏可以說基本能用vue-cli創建項目，基礎的使用，組件的調用
• 其實代碼我很早就寫完了，博客是我後來補起來的，如果不準確，可以留言。