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'
-
import 'element-ui/lib/theme-chalk/index.css'
-
Vue.use(elementUI)