從0到1,一步步構建Vue單頁面應用

重新開始,獨立完成 Vue 項目

準備工作

Node.js、Vue官方文檔、ES6

項目構建

直接使用 Vue 官方提供的腳手架(Vue-cli),所以第一步首先是安裝腳手架。在命令行或者 Webstorm 的 Terminal 窗口中輸入以下命令即可自動安裝:

npm i -g vue-cli(全局安裝之後,下次可以直接使用,不需要再次安裝)

安裝完成之後,初始化應用的目錄

vue init webpack app(app爲項目的根目錄)

回車之後會有幾個初始化的選項需要你選擇:

  1. 項目名、描述、作者,直接回車即可
  2. vue build 選項,與配置相關的,直接回車即可
  3. 是否安裝vue-router,後面一般都會用到,所以推薦輸入y
  4. 語法檢查、單元測試、項目測試,直接輸n即可
  5. 項目創建之後是否 npm install ,選擇Yes

clipboard.png

回車之後,會自動生成項目結構和安裝各種依賴文件。
下載之後輸入 npm init -y 初始化項目
之後,輸入 npm run dev 運行項目,稍等下完成後就能拿到URL地址,你可以在瀏覽器打開初始頁面。

clipboard.png

到這裏,一個基礎的單頁應用就算是創建完成了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章