1. 程式人生 > >vue學習之路(1)——搭建vue腳手架(vue-cli)

vue學習之路(1)——搭建vue腳手架(vue-cli)

  • 準備的環境和工具
 1. 首先安裝node.js,官網:https://nodejs.org/en/
 2. win+r 輸入cmd 開啟 命令列 輸入node -v 出現相應的版本號,則說明安裝成功。此時已經自帶npm(包管理工具)
3. 安裝淘寶映象(cnpm),開啟命令列工具,輸入:npm install -g cnpm --registry= https://registry.npm.taobao.org
 4. 安裝webpack,開啟命令列工具輸入:npm install webpack -g,安裝完成之後輸入 webpack -v,如果出現相應的版本號,則說明安裝成功。
 5. 安裝vue-cli腳手架,輸入:npm install vue-cli -g,安裝完成之後輸入 vue -V(注意這裡是大寫的“V”)出現相應的版本號,則說明安裝成功。
  • 使用vue-cli來構建專案:
1. 在硬碟上找一個資料夾放工程:cd 目錄路徑 
2. 安裝vue腳手架輸入:vue init webpack name,這裡的“ name” 是你專案的名稱。
3. cd 命令工程目錄(cd name)
4. 安裝專案依賴:npm install,因為自動構建過程中已存在package.json檔案,所以這裡直接安裝依賴就行。不要使用cnpm安裝,會導致後面缺了很多依賴庫,不成功再用:cnpm install。
5. 
啟動專案,輸入:npm run dev。 6. 如果瀏覽器開啟之後,沒有加載出頁面,有可能是本地的 8080 埠被佔用,需要修改一下配置檔案 config>index.js裡的port 7. 打包檔案:npm run build

相關推薦

vue學習1——搭建vue腳手架vue-cli

準備的環境和工具 1. 首先安裝node.js,官網:https://nodejs.org/en/ 2. win+r 輸入cmd 開啟 命令列 輸入node -v 出現相應的版本號,則說明安裝成功。此時已經自帶npm(包管理工具) 3. 安

vue學習 - 4.基本操作

align 過去 開始 就會 binding 效果 不可 exp 功能 vue學習之路 - 4.基本操作(下) 簡述:本章節主要介紹 vue 的一些其他常用指令。 Vue 指令   這裏將 vue 的指令分為系統內部指令(vue 自帶指令)和用戶自定義指令兩種。 系統內部指

Vue學習 --- 非父元件之間的通訊

1. 非vuex實現 非父元件之間的通訊 原理是:在父元件或者全域性建立一個事件倉儲eventHub,然後通過$emit 和 $on 實現通訊 1.1 通過在window上繫結eventHub的Vue例項物件,具體實現方法如下: 目錄結構

Vue學習 --- vue-router使用

1.首先安裝vue-router ,在專案的資料夾中使用npm命令即npm install vue-router –save(提示:如果你在vue-cli腳手架工具中已經選擇安裝路由可以不用執行這一步) 2.在實戰中,一般路由放在src/router/index.js中具體操作

Vue學習---transition過渡動畫

vue中過度動畫v-if和v-show都可以使用,首先要明白四個狀態,v-enter(剛開始進入) ,v-enter-active(進入過程中到進入完畢),v-leave-enter(剛開始離開),v-leave-enter-active(離開過程中到離開),示例圖如下 好的,弄

Vue學習---父元件與子元件之間的資料傳遞

前面我講了基本元件的寫法,現在一起學下父元件怎樣傳遞資料到子元件,以及子元件傳遞資料到父元件的 1.父元件傳遞資料到子元件 1.1 通過props傳遞 父元件App.vue中 <component-a big-num=98></component-a&g

vue學習--vue-cli安裝+vue-router+vue-resource

一、Vue-cli:腳手架安裝a) 安裝nodejs;b) win+r,輸入cmd進入命令列工具;c) 安裝vue-cli:(-g:全域性安裝)i. 方法一:npm install vue-cli -g:此方法連結的是國外網站會比較卡;ii. 方法二:安裝cnpm,通過淘寶映

後端開發者的Vue學習

right alt method 標簽 .com arr rac tde iyu 目錄 上篇內容回顧: 數據綁定 表單輸入框綁定 單行文本輸入框 多行文本輸入框 復選框checkbox 單選框radio 選擇框select 數據綁定的修飾符 .lazy .number

Vue學習----Computed計算屬性與watch監聽

1.computed計算屬性常用於當value值變化時重新對值進行計算。舉個簡單的例子(當輸入框中的value值變化時,輸出結果為無數字的字串): //html <input type="text" v-model="value"/>{{value

後端開發者的Vue學習

兼容 .com 數據拷貝 divide 有趣 驗證碼 bin 引用 用戶名 目錄 上節內容回顧 組件 什麽是組件 組件註冊 全局註冊組件 局部註冊組件 使用細節 組件註冊的命名規範: 組件中只有一個根元素 組件也是一個實例 組件在某些元素中渲染出錯 組件間的數據傳遞

VUE學習全域性API Vue.extend

一。Vue.extend定義 Vue.extend返回的是一個“拓展例項構造器”,也就是預設了部分選項的Vue例項構造器。經常服務於Vue.component用來生成元件,可以簡單理解為當在模板中遇到該元件名稱作為標籤的自定義元素時,會自動呼叫“拓展例項構造器”來生產元件例

vue學習--vue-awesome-swiper

<template>  <swiper :options="swiperOption">   //vue元件標籤    <swiper-slide><img src="./0.jpg"width="100%"> </swiper-slide>   

vue學習 - 1.初步感知

mar 進行 配置 單元素 ie8 getter 控件 world 特性 一、安裝   這裏使用node的npm包管理工具進行操作。操作前請先下載node。   在工程文件夾中使用以下命令安裝vue: npm install vue   如下圖所示:我在 he

Linux學習:第一章下載並安裝LinuxCentOS7

備註:屬於個人分享,文章如有問題請留言,謝謝! 第一章下載並安裝Linux 1、官方下載地址: DVD ISO                   基本安裝包    大小4.16G Everything ISO                 最全安裝包   

hadoop學習----HDFS原理與基本架構總結第二講

第二講主要內容如下1.HDFS特點(也就是HDFS適用什麼場景)2.HDFS缺點(也就是HDFS不適用什麼場景)3.HDFS基本架構4.HDFS工作原理5.下一代HDFS介紹下面主要聊聊其中的各個部分1.HDFS特點(主要出自PPT)主要有以下五點高容錯性       資料自動儲存多個副本          

Leaflet學習二——在地圖上繪製要素點、線、多邊形

添加註記 繪製點 繪製線 繪製多邊形 繪製彈出框 首先,我們有一個地圖 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.

Python學習——day 1

exc 默認 image java imp final python ret ber Python安裝   前往官網下載安裝包,選擇自己需要的Python版本。現在的Python早已進入3.x時代,最好選擇3.x的版本。2.x的版本已不在更新,且將在2020年停止服務。  

python學習-day4.1

函數(高階函數、嵌套函數、匿名函數) 裝飾器 生成器 裝飾器需要了解以下三點知識:1、函數即變量;2、高階函數;3、嵌套函數;所以首先先普及一下知識點:變量定義x = 1,數據1讀取到內存中,可以理解為存到一房間中,而x表示房間號;函數定義,函數體部分讀取到內存中,而函數名表示房間號;def te

Vue學習7-v-on指令學習簡單事件綁定

調用 pan spl onerror reset ima 簡單 rip 指令 前言 在JavaScript中任何一個DOM元素都有其自身存在的事件對象,事件對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置和鼠標按鈕的狀態等。事件通常與函數結合使用,函

Vue學習8-v-on指令學習簡單事件綁定屬性

當前 14. export mit 修飾符 第一次 例如 www sco 前言 上一篇文章以v-on指令綁定click事件為例介紹了v-on指令的使用方法,本文介紹一下v-on綁定事件的一些屬性的使用方法。 v-on綁定指令屬性 .stop屬性 阻止單擊事件繼