Vue使用vue-cli創(chuàng)建項(xiàng)目
本文介紹了Vue使用vue-cli創(chuàng)建項(xiàng)目,分享給大家,具體如下:
vue-cli 是一個官方發(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)目的名稱。目前提供一下幾種:
也可以使用自定義的模板,可以來自遠(yuǎn)端托管倉庫或本地。
選用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)目過程中有一下幾個問題:
1.本地開發(fā)狀態(tài)啟動項(xiàng)目時,常會有代碼空行、分號報(bào)錯的問題。 原因:在創(chuàng)建項(xiàng)目時,選擇了使用eslint語法校驗(yàn)。
2.引入樣式報(bào)錯問題,babel無法編譯css文件。
Module not found: Error: Cannot resolve module 'mint-ui/style.css'
原因:全局引入需要引入樣式,如果在.babelrc中設(shè)置過按需引入,則不要再專門引入css.
3.另外引入的組件要在自定義組件中注冊,組件中嵌套的組件也要進(jìn)行引用和注冊。
4.非渲染dom組件無需寫在模板內(nèi),也無需注冊,可以直接調(diào)用使用。比如load的Indicator
三、vue-router的使用
github地址:https://github.com/vuejs/vue-router
在入口文件main.js中引入
import VueRouter from 'vue-router'; Vue.use(VueRouter); //然后實(shí)例化一個router const router = new VueRouter({ mode: 'history', routes: routes });
rotues是自己分配的路由設(shè)置;
四、使用vuex進(jìn)行狀態(tài)管理
vue的狀態(tài)管理工具 vuex
下面簡單介紹下vuex各個部分的概念
- state是一個全局的狀態(tài)存儲,數(shù)據(jù)會存儲在其中,vue組件可以直接訪問其中的值,但是只可以讀,不可以進(jìn)行寫操作
- getter,有些時候我們需要對獲取的數(shù)據(jù)進(jìn)行加工,而不是直接獲取state中的數(shù)據(jù),這時候可以通過getter定義函數(shù),返回對應(yīng)的數(shù)據(jù)
- mutations是vuex中唯一一個可以修改數(shù)據(jù)的地方,mutations可以定義事件函數(shù),在vue組件中可以通過commit發(fā)射事件,調(diào)用函數(shù)。需要注意的是,mutations中的操作必須是同步的,不可以存在異步操作的情況。
- actions和 mutation比較相似,不同的是actions中不直接修改state,而是通過commit調(diào)用mutations修改數(shù)據(jù),而且actions中可以存在異步處理邏輯
使用vuex需要在Vue.use中引入,然后實(shí)例化一個Vuex.Store對象就可以了,對象中需要定義state,actions,mutations,getters等內(nèi)容,這樣子就可以建立一個全局的狀態(tài)管理機(jī)制,可以從應(yīng)用的頂端去處理數(shù)據(jù),各個組件中對數(shù)據(jù)進(jìn)行操作也是通過事件直接傳遞到Vuex中進(jìn)行數(shù)據(jù)更新,然后再進(jìn)行響應(yīng)到其他使用同個數(shù)據(jù)的組件中,進(jìn)行視圖更新。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04淺談webpack SplitChunksPlugin實(shí)用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁面,瀏覽器窗口隨意拉伸,背景視頻及前景登錄組件均能完美適配,背景視頻可始終鋪滿窗口,前景組件始終居中,視頻的內(nèi)容始終得到最大限度的保留,可以得到最好的視覺效果2018-01-01解決vue項(xiàng)目中type=”file“ change事件只執(zhí)行一次的問題
這篇文章主要介紹了vue項(xiàng)目中解決type=”file“ change事件只執(zhí)行一次的問題,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05網(wǎng)站國際化多語言處理工具i18n安裝使用方法圖文詳解
國際化是設(shè)計(jì)軟件應(yīng)用的過程中應(yīng)用被使用與不同語言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國際化多語言處理工具i18n安裝使用方法的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09Vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查的示例代碼
Vue是一個用于構(gòu)建用戶界面的JavaScript框架,在Vue中可以通過使用Vue組件來實(shí)現(xiàn)對表格的增刪改查操作,下面將介紹一些基礎(chǔ)的Vue組件和技術(shù)來實(shí)現(xiàn)對表格的增刪改查操作,需要的朋友可以參考下2024-08-08