VUE 全家桶 vue-cli 2 | vue-cli 3

weixin_34253539發表於2018-05-16

Vue

安裝Node.js

官網下載，一直下一步

檢視是否安裝成功.png

npm 淘寶映象 npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝Webpack

npm install webpack -g

因為之前安裝過，檢視是否安裝成功時，有如下提示

提示.png

執行npm install webpack-cli -D

報錯如下

報錯.png

嘗試全域性安裝webpack-cli

安裝成功.png

再次檢視webpack是否安裝成功

檢視是否安裝成功.png

安裝vue-cli

npm install vue-cli -g

檢視是否安裝成功

檢視是否安裝成功.png

構建專案

新建目錄vue-practice
e:
cd vue-practice
vue init webpack vue-sop

執行結果如下，紅框部分輸入N

結果.png

cd vue-sop
npm install

報錯.png

嘗試用 cnpm install

結果.png

執行npm run dev，啟動專案

結果.png

發現沒有自動開啟瀏覽器

在sublime text 3 配置工程，專案-新增專案-選擇剛才初始化好的目錄

新增工程.png

找到config/index.js，修改18行： autoOpenBrowser: false,為autoOpenBrowser: true,

ctrl+c終止，npm run dev再次啟動，可以自動開啟了

結果.png

安裝Element

npm i element-ui -S

安裝Element.png

安裝axios

npm i axios -S

圖片.png

引入Element和axios

引入.png

編寫src/App.vue

<el-menu-item index="/CreateApp">建立應用</el-menu-item>
這裡的index屬性指向路由

配置路由

router/index.js 如下

router/index.js.png

建立並編寫components/CreateApp.vue和components/AppList.vue

遇到的問題

只能由一個vue例項，所以每個.vue的指令碼必須只能用export default {}的寫法
注意vue不允許並列的頁面元素出現在template標籤下，必須用一層div包裹一下，才可以元素並列
element-ui是24柵格
data的寫法如下，需要新增return

data() {
        return {
            createAppForm:{
                client_id: '',
                client_secret: '',
                client_name: '',
            },
            active: 0,
            createAppRule:{
                client_name:[
                    { required: true, message: '請輸入應用名稱', trigger: 'blur' },
                ]
            }
        }
    },

生命週期的鉤子函式mounted()可以實現元素渲染完畢後，渲染資料

再次啟動工程檢視效果

效果.png

安裝Echarts

npm i echarts -S

結果.png

引入Echarts

引入Echarts.png

編寫Dashboard.vue並配置路由

效果.png

封裝工具

編寫 assets/util-api.js

關鍵
export {formateDate};
export {REQ_URL}

在main.js引入

關鍵
import {formateDate} from './assets/util-api'
import {REQ_URL} from './assets/util-api'

Vue.prototype.REQ_URL = REQ_URL

在Dashboard.vue執行

關鍵
let day = this.axios.get(${this.$REQ_URL.a}/api/allaccess/day?day=${day})
.then(response => {
this.yesterday_call_count = response.data.success_count;
})

mounted()呼叫methods裡面的方法需要this