Vue.js入門

1、安裝node.js

官網:http://nodejs.cn/download/  下載相應的版本,並安裝,目錄如下

把Node添加到系統環境變量裏面,打開cmd命令行,輸入npm -v,如果出現如下圖的顯示,說明已經安裝正確。

如果你安裝的是舊版本的 npm,可以通過 npm 命令進行升級。

2、安裝webpack

安裝好 npm 之後,就可以通過 npm 命令來下載各種工具了。

安裝打包工具 webpack,-g 表示全局安裝。

npm install webpack -g

3、安裝vue-cli

安裝 vue 腳手架項目初始化工具 vue-cli,-g 表示全局安裝。

npm install vue-cli -g

4、淘寶鏡像(看情況)

因爲 npm 使用的是國外中央倉庫,有時候下載速度比較“喜人”,就像 Maven 有國內鏡像一樣,npm 在國內也有鏡像可用。這裏建議使用淘寶鏡像。

安裝淘寶鏡像,安裝成功後 用 cnpm 替代 npm 命令即可,如: cnpm install webpack -g 。

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

5、創建項目

vue init webpack my-project  -->輸入以上命令之後,安照提示,輸入相應的內容即可。

$ vue init webpack kitty   -- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template.   --這裏說明將要創建一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 kitty
? Project name (kitty)   --項目名稱
? Project name kitty
? Project description (kitty project)   --項目描述
? Project description kitty project
? Author Louis   -- 項目創建者
? Author Louis
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)   -- 是否安裝Vue路由,也就是以後是spa(但頁面應用需要的模塊)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n   --是否啓用eslint檢測規則,這裏個人建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "kitty".
To get started:   -- 這裏說明如何啓動這個服務
cd kitty
npm install
npm run dev

目錄結構如下:


6、安裝依賴:npm install

7、啓動服務:npm run dev

8、編譯打包

開發完成後,通過以下命令就可把整個項目打包,生成到 dist 目錄下,直接拷貝到服務器即可。

npm run build

---------------------

VUE項目引入axios:

下載:$ npm install axios --save

引入:import axios from ‘axios’
           Vue.prototype.$axios = axios

 

VUE項目引入element-ui:

下載:npm install element-ui --save 或者 npm i element-ui -S

引入:import elementUI from 'element-ui'

  1.   import 'element-ui/lib/theme-chalk/index.css'

  2.   Vue.use(elementUI)

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章