第一步
打開nodejs:https://nodejs.org/zh-cn/官網,
下載並安裝,一路下一步,安裝完成打開cmd命令工具,輸入
node-v
npm-v
查看是否安裝正確,如果找不到,請查看系統環境變量裏面是否配置了node路徑
第二步
更新npm爲最新版本,打開cmd命令工具,輸入
npm install -g npm
自動更新npm爲最新版本,更新成功,輸入
npm -v
查看當前npm版本號
第三步
安裝vue-cli手腳架
Vue 提供了一個官方的 CLI,爲單頁面應用快速搭建 (SPA) 繁雜的腳手架。它爲現代前端工作流提供了 batteries-included 的構建設置。只需要幾分鐘的時間就可以運行起來並帶有熱重載、保存時 lint 校驗,以及生產環境可用的構建版本。
打開cmd命令工具,輸入
npm install -g vue-cli
等待安裝結束。
第四步
創建vue項目
打開cmd命令工具{
首先需要cd到存放項目的文件夾路徑下。
},輸入
vue init <template-name> <project-name>
template-name:
. webpack
. webpack-simple // 一個簡單webpack+vue-loader的模板,不包含其他功能。
. browserify // 一個全面的Browserify+vueify 的模板,功能包括熱加載,linting,單元檢測。
. browserify-simple // 一個簡單Browserify+vueify的模板,不包含其他功能。
. pwa // 基於webpack模板的vue-cli的PWA模板
. simple // 一個最簡單的單頁應用模板
例如:vue init webpack vue-demo
需要確認一些基本信息
需要注意的是項目的名稱不能大寫,不然會報錯。
Project name :項目名稱 ,如果不需要更改直接回車就可以了。注意:這裏不能使用大寫。
Project description:項目描述,默認爲A Vue.js project,直接回車,不用編寫。
Author:作者,如果你有配置git,他會讀取.ssh文件中的user。
Install vue-router? 是否安裝vue的路由插件,Y代表安裝,N無需安裝,下面的命令也是一樣的。
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試。
Should we run npm install for you after the project has been created?(recommended)npm
等待創建完成
第五步
運行vue項目
打開cmd命令工具{
定位到當前項目文件夾目錄下
},輸入
npm run dev
開啓成功;
打開瀏覽器輸入
http://localhost:8080/
查看運行效果