1. 安裝node.js
地址:https://www.runoob.com/nodejs/nodejs-install-setup.html
查看版本:node --version
查看npm版本: npm -v
安裝cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 安裝VUE-CLI腳手架
vue腳手架指的是vue-cli,它是一個專門為單頁面應用快速搭建繁雜的腳手架,它可以輕松的創建新的應用程序而且可用於自動生成vue和webpack的項目。
安裝腳手架:npm install -g @vue/cli 或cnpm install vue-cli -g
注:-g代表全局安裝
查看版本(是否安裝):vue -V
3. 創建一個基於webpack模版的項目
1) Vue項目初始化命令如下,若沒有安裝webpack則先安裝webpack
npm install -g webpack
2) 創建項目
Vue init webpack myVue
注:安裝過程中有個選項(Use ESlint to line your code?選擇No)
運行初始化命令的時候會讓用戶輸入幾個基本的選項,如項目名稱、描述、作者等信息,如果不想填寫回車默認就好.
l Project name (my-vue):項目名稱
l Project description (A Vue.js project)項目描述一個Vue.js項目
l Author:作者
l Install vue-router?(Y/n):是否安裝Vue路由,也就是以后是spa(單頁面應用
l Use ESLint to lint your code?(y/n):使用ESlint到你的代碼?(y/n)
l Pick an ESlint preset(Use arror keys):選擇一個預置ESLint(使用箭頭)
l Setup unit tests with Karma +Mocha?(y/n):設置單元測Karma +Mocha?(Y/N)
l Set e2e tests with Nightwatch?(y/n):設置端到端測試,NightWatch?(y/n)
注:這些都看個人情況設置
初始化完后的vue項目目錄如下:
3) 進入到myVue目錄下,使用npm install 安裝package.json包中的依賴,命令如下:
cd myVue
npm install
4) 運行項目
npm run dev 或 cnpm run dev
在瀏覽器上輸入:localhost:8080,將會出現下面的vue初始界面
5) 結束項目運行:
Ctrl+v,選擇Y即可停止項目的運行