1.下載安裝node.js
一路默認安裝,啟動命令行,輸入命令node -v,可以看到node.js的版本號
2.安裝vue-cli
使用npm(需要安裝node環境)全局安裝webpack,啟動命令行,輸入如下命令:
npm install -g webpack
安裝完成后輸入 webpack -v
從webpack 4.X開始,需要全局安裝webpack-cli
全局安裝vue-cli,在cmd中輸入命令
npm install --global vue-cli
耐心等待安裝完成之后輸入 vue -V(注意這里是大寫的“V”),如下圖,如果出現相應的版本號,則說明安裝成功。
打開C:\Users\Andminster\AppData\Roaming\npm目錄
打開node_modules也可以看到:
3.用vue-cli構建項目
首先在D盤新建一個VueStudy作為項目存放地,然后使用命令行cd進入到項目目錄,輸入
vue init webpack demo
需要選擇一些選項,會跳出幾個選項讓你回答:
1.Project name (demo): -----項目名稱,直接回車,按照括號中默認名字(注意這里的名字不能有大寫字母)
2.Project description (A Vue.js project): ----項目描述,也可直接點擊回車,使用默認名字
3.Author (): ----作者,輸入你的大名
接下來會讓用戶選擇:
4.Runtime + Compiler: recommended for most users 運行加編譯,既然已經說了推薦,就選它了
5.Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時,已經有推薦了就選擇第一個了
6.Install vue-router? (Y/n) 是否安裝vue-router,這是官方的路由,大多數情況下都使用。
7.Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼,ESLint是個代碼風格管理工具,是用來統一代碼風格的。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設,編寫vue項目時的代碼風格
8.Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試
9.Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試
完成后,查看項目路徑下各個目錄含義
啟動項目,輸入命令
npm run dev
如果瀏覽器打開之后,沒有加載出頁面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js
運行成功