1.安裝node.js
下載安裝node.js烘苹,一路默認安裝即可躲株,安裝完畢,啟動命令行镣衡,輸入命令node -v霜定,可以看到node.js的版本號
2.安裝vue-cli
- 使用npm(需要安裝node環(huán)境)全局安裝webpack,啟動命令行廊鸥,輸入如下命令:
npm install -g webpack
耐心等待安裝完成之后輸入 webpack -v望浩,可以看到如圖所示
- 從webpack 4.X開始,需要全局安裝webpack-cli
npm install webpack webpack-cli -g
- 全局安裝vue-cli惰说,在cmd中輸入命令
npm install --global vue-cli
耐心等待安裝完成之后輸入 vue -V(注意這里是大寫的“V”)磨德,如下圖,如果出現(xiàn)相應的版本號吆视,則說明安裝成功典挑。
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到
npm目錄.jpg
打開node_modules也可以看到:
3.用vue-cli來構(gòu)建項目
首先在D盤新建一個VueStudy作為項目存放地,然后使用命令行cd進入到項目目錄啦吧,輸入
vue init webpack demo
需要選擇一些選項您觉,會跳出幾個選項讓你回答:
Project name (demo): -----項目名稱,直接回車授滓,按照括號中默認名字(注意這里的名字不能有大寫字母)
Project description (A Vue.js project): ----項目描述琳水,也可直接點擊回車,使用默認名字
Author ():默認
接下來會讓用戶選擇:
Runtime + Compiler: recommended for most users 運行加編譯般堆,既然已經(jīng)說了推薦在孝,就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時,已經(jīng)有推薦了就選擇第一個了
Install vue-router? (Y/n) 是否安裝vue-router淮摔,這是官方的路由浑玛,大多數(shù)情況下都使用。yes
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼噩咪,ESLint是個代碼風格管理工具顾彰,是用來統(tǒng)一代碼風格的极阅。no
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設(shè),編寫vue項目時的代碼風格
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試no
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 no
配置完成后涨享,進入demo項目目錄筋搏,安裝依賴
npm install
啟動項目
npm run dev
運行成功(服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”)