Vue使用vue-cli創(chuàng)建項(xiàng)目

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

vue-cli 是一個(gè)官方發(fā)布vueJS項(xiàng)目腳手架：https://github.com/vuejs/vue-cli

我創(chuàng)建的模板項(xiàng)目：https://github.com/Aleczhang1992/my-vue-project/tree/dev

一、步驟

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

可以設(shè)置cnpm可以提升依賴(lài)包下載速度：

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

安裝vue-cli

sudo npm install -g vue-cli

2.創(chuàng)建模板項(xiàng)目

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

其中template-name是可選模板項(xiàng)，project-name是創(chuàng)建項(xiàng)目的名稱(chēng)。目前提供一下幾種：

也可以使用自定義的模板，可以來(lái)自遠(yuǎn)端托管倉(cāng)庫(kù)或本地。

選用webpack模板項(xiàng)目：https://github.com/vuejs-templates/webpack

二、Mint_UI框架的使用

1.完整引入

在 main.js 中寫(xiě)入以下內(nèi)容：

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 的引入。需要注意的是，樣式文件需要單獨(dú)引入。

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)
/* 或?qū)憺? * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
 el: '#app',
 render: h => h(App)
})

創(chuàng)建項(xiàng)目過(guò)程中有一下幾個(gè)問(wèn)題：

1.本地開(kāi)發(fā)狀態(tài)啟動(dòng)項(xiàng)目時(shí)，常會(huì)有代碼空行、分號(hào)報(bào)錯(cuò)的問(wèn)題。 原因：在創(chuàng)建項(xiàng)目時(shí)，選擇了使用eslint語(yǔ)法校驗(yàn)。

2.引入樣式報(bào)錯(cuò)問(wèn)題，babel無(wú)法編譯css文件。

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

原因：全局引入需要引入樣式，如果在.babelrc中設(shè)置過(guò)按需引入，則不要再專(zhuān)門(mén)引入css.

3.另外引入的組件要在自定義組件中注冊(cè),組件中嵌套的組件也要進(jìn)行引用和注冊(cè)。

4.非渲染dom組件無(wú)需寫(xiě)在模板內(nèi)，也無(wú)需注冊(cè)，可以直接調(diào)用使用。比如load的Indicator

三、vue-router的使用

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

在入口文件main.js中引入

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

rotues是自己分配的路由設(shè)置；

四、使用vuex進(jìn)行狀態(tài)管理

vue的狀態(tài)管理工具 vuex

下面簡(jiǎn)單介紹下vuex各個(gè)部分的概念

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com