欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年09月01日 17:15:35   作者:默默先生Alec  
這篇文章主要介紹了Vue使用vue-cli創(chuàng)建項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了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可以提升依賴包下載速度:

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)目的名稱。目前提供一下幾種:


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

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

二、Mint_UI框架的使用

1.完整引入

在 main.js 中寫入以下內(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ò)按需引入,則不要再專門引入css.


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

4.非渲染dom組件無(wú)需寫在模板內(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è)部分的概念

  • state是一個(gè)全局的狀態(tài)存儲(chǔ),數(shù)據(jù)會(huì)存儲(chǔ)在其中,vue組件可以直接訪問(wèn)其中的值,但是只可以讀,不可以進(jìn)行寫操作
  • getter,有些時(shí)候我們需要對(duì)獲取的數(shù)據(jù)進(jìn)行加工,而不是直接獲取state中的數(shù)據(jù),這時(shí)候可以通過(guò)getter定義函數(shù),返回對(duì)應(yīng)的數(shù)據(jù)
  • mutations是vuex中唯一一個(gè)可以修改數(shù)據(jù)的地方,mutations可以定義事件函數(shù),在vue組件中可以通過(guò)commit發(fā)射事件,調(diào)用函數(shù)。需要注意的是,mutations中的操作必須是同步的,不可以存在異步操作的情況。
  • actions和 mutation比較相似,不同的是actions中不直接修改state,而是通過(guò)commit調(diào)用mutations修改數(shù)據(jù),而且actions中可以存在異步處理邏輯

使用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)行視圖更新。




以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能

    Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能

    這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-04-04
  • Vue3菜單展開(kāi)和收起實(shí)現(xiàn)

    Vue3菜單展開(kāi)和收起實(shí)現(xiàn)

    在Vue項(xiàng)目中實(shí)現(xiàn)首頁(yè)布局,包括可收放的左側(cè)菜單和主體內(nèi)容區(qū),在store中管理菜單狀態(tài),通過(guò)修改isCollapse狀態(tài)控制菜單的展開(kāi)與收起,在home.vue中編寫左側(cè)菜單欄的代碼和樣式,實(shí)現(xiàn)一個(gè)響應(yīng)式的用戶界面
    2024-09-09
  • 淺談webpack SplitChunksPlugin實(shí)用指南

    淺談webpack SplitChunksPlugin實(shí)用指南

    這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue中this.$emit和this.$on的使用

    Vue中this.$emit和this.$on的使用

    這篇文章主要介紹了Vue中this.$emit和this.$on的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁(yè)面實(shí)現(xiàn)方式

    基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁(yè)面實(shí)現(xiàn)方式

    本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁(yè)面,瀏覽器窗口隨意拉伸,背景視頻及前景登錄組件均能完美適配,背景視頻可始終鋪滿窗口,前景組件始終居中,視頻的內(nèi)容始終得到最大限度的保留,可以得到最好的視覺(jué)效果
    2018-01-01
  • Vue.js高效前端開(kāi)發(fā)

    Vue.js高效前端開(kāi)發(fā)

    Vue是構(gòu)建Web界面的JavaScript庫(kù),原稱為Vue.js,它可以通過(guò)簡(jiǎn)潔的API來(lái)提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí),有興趣的同學(xué)可以參考借鑒
    2023-03-03
  • 解決vue項(xiàng)目中type=”file“ change事件只執(zhí)行一次的問(wèn)題

    解決vue項(xiàng)目中type=”file“ change事件只執(zhí)行一次的問(wèn)題

    這篇文章主要介紹了vue項(xiàng)目中解決type=”file“ change事件只執(zhí)行一次的問(wèn)題,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-05-05
  • 詳解vue+webpack+express中間件接口使用

    詳解vue+webpack+express中間件接口使用

    這篇文章主要介紹了詳解vue+webpack+express中間件接口使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07
  • 網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法圖文詳解

    網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法圖文詳解

    國(guó)際化是設(shè)計(jì)軟件應(yīng)用的過(guò)程中應(yīng)用被使用與不同語(yǔ)言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • Vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼

    Vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼

    Vue是一個(gè)用于構(gòu)建用戶界面的JavaScript框架,在Vue中可以通過(guò)使用Vue組件來(lái)實(shí)現(xiàn)對(duì)表格的增刪改查操作,下面將介紹一些基礎(chǔ)的Vue組件和技術(shù)來(lái)實(shí)現(xiàn)對(duì)表格的增刪改查操作,需要的朋友可以參考下
    2024-08-08

最新評(píng)論