Vue使用vue-cli創建項目

2019-11-19 15:35:06

字體：大中小

來源：轉載

供稿：網友

本文介紹了Vue使用vue-cli創建項目，分享給大家，具體如下：

vue-cli 是一個官方發布vueJS項目腳手架：https://github.com/vuejs/vue-cli

我創建的模板項目：https://github.com/Aleczhang1992/my-vue-project/tree/dev

一、步驟

1.要求已安裝Node.js (>=4.x, 6.x preferred) and Git.

可以設置cnpm可以提升依賴包下載速度：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝vue-cli

sudo npm install -g vue-cli

2.創建模板項目

命令格式：vue init <template-name> <project-name>

其中template-name是可選模板項，project-name是創建項目的名稱。目前提供一下幾種：

也可以使用自定義的模板，可以來自遠端托管倉庫或本地。

選用webpack模板項目：https://github.com/vuejs-templates/webpack

二、Mint_UI框架的使用

1.完整引入

在 main.js 中寫入以下內容：

import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'Vue.use(MintUI)new Vue({ el: '#app', render: h => h(App)})

以上代碼便完成了 Mint UI 的引入。需要注意的是，樣式文件需要單獨引入。

2.按需引入

安裝 babel-plugin-component：

npm install babel-plugin-component -D

將 .babelrc 修改為：

{ "presets": [  ["es2015", { "modules": false }] ], "plugins": [["component", [  {   "libraryName": "mint-ui",   "style": true  } ]]]}

引入方式如下

import Vue from 'vue'import { Button, Cell } from 'mint-ui'import App from './App.vue'Vue.component(Button.name, Button)Vue.component(Cell.name, Cell)/* 或寫為 * Vue.use(Button) * Vue.use(Cell) */new Vue({ el: '#app', render: h => h(App)})

創建項目過程中有一下幾個問題：

1.本地開發狀態啟動項目時，常會有代碼空行、分號報錯的問題。原因：在創建項目時，選擇了使用eslint語法校驗。

2.引入樣式報錯問題，babel無法編譯css文件。

Module not found: Error: Cannot resolve module 'mint-ui/style.css'

原因：全局引入需要引入樣式，如果在.babelrc中設置過按需引入，則不要再專門引入css.

3.另外引入的組件要在自定義組件中注冊,組件中嵌套的組件也要進行引用和注冊。

4.非渲染dom組件無需寫在模板內，也無需注冊，可以直接調用使用。比如load的Indicator

三、vue-router的使用

github地址：https://github.com/vuejs/vue-router

在入口文件main.js中引入

import VueRouter from 'vue-router';Vue.use(VueRouter);//然后實例化一個routerconst router = new VueRouter({mode: 'history',routes: routes});

rotues是自己分配的路由設置；

四、使用vuex進行狀態管理

vue的狀態管理工具 vuex

下面簡單介紹下vuex各個部分的概念

state是一個全局的狀態存儲，數據會存儲在其中，vue組件可以直接訪問其中的值，但是只可以讀，不可以進行寫操作
getter,有些時候我們需要對獲取的數據進行加工，而不是直接獲取state中的數據，這時候可以通過getter定義函數，返回對應的數據
mutations是vuex中唯一一個可以修改數據的地方，mutations可以定義事件函數，在vue組件中可以通過commit發射事件，調用函數。需要注意的是，mutations中的操作必須是同步的，不可以存在異步操作的情況。
actions和 mutation比較相似，不同的是actions中不直接修改state，而是通過commit調用mutations修改數據，而且actions中可以存在異步處理邏輯

使用vuex需要在Vue.use中引入，然后實例化一個Vuex.Store對象就可以了,對象中需要定義state,actions,mutations,getters等內容，這樣子就可以建立一個全局的狀態管理機制，可以從應用的頂端去處理數據，各個組件中對數據進行操作也是通過事件直接傳遞到Vuex中進行數據更新，然后再進行響應到其他使用同個數據的組件中，進行視圖更新。