VueJS搭建簡單後臺管理系統框架(一)環境搭建

作這份筆記的時候,Vue.js仍是1.0,10月份Vue已經升級到2.0,這邊也進行相應的更新,用Vue2.0進行一個簡單的環境搭建
餓了麼也恰好開源了其基於Vue.js的UI框架element-uihtml

傳送門

1. 環境搭建

因爲辦公環境是在Windows下開發,因此仍是選擇在Windows進行Vue.js的開發,使用NodeJS環境進行編譯,打包等前端

1.1 NodeJS及NPM安裝

1.1.1 NodeJS下載

在NodeJS官網中下載對應的NodeJS版本https://nodejs.org/en/
下載完成後進行安裝,NodeJS安裝完成後,對應的NPM也會安裝完成,安裝完成後須要設置NodeJS到環境變量中,在CMD命令行鍵入如下代碼,驗證NodeJS及NPM是否安裝正確 目前最新版本4.6.0對應npm版本2.15.9,能夠手動升級到最新版本npmvue

> node -v
v4.6.0
> npm -v
v2.15.9

npm升級到最新版本的方法
切換路徑到nodejs安裝目錄下(如:c:\program files\nodejs),執行如下命令:
npm install npm@latest -gnode

1.1.2 安裝nrm

因爲npm的鏡像資源在國外,訪問速度慢,能夠使用npm安裝nrm,來管理npm的鏡像資源webpack

> npm install -g nrm

使用nrm ls命令查看可用的資源

使用 nrm use ***選擇要使用的鏡像,如nrm use taobao
git

1.1.3 安裝打包工具webpack

使用github

npm install -g webpack

安裝webpack
web

1.2 使用Vue的官方命令行工具搭建一個簡單的VueJS應用

1.2.1 安裝vue-cli

使用命令vue-router

npm install -g vue-cli

安裝Vue的官方命令行工具vue-cli
vue-cli

1.2.2 用vue-cli搭建一個基本的工程

使用如下命令,建立一個名爲vue-test的前端項目

vue init webpack vue-test

此致環境的搭建基本完成

相關文章
相關標籤/搜索