vue_webpack初始化項目


整體架構:
此處npm安裝過於緩慢,因此使用的是淘寶的鏡像cnpm

vue+webpack 初始化項目:
1、安裝vue: cnpm install vue
  檢驗版本: vue -V
2、創建一個vue項目:
  全局安裝vue-cli: cnpm install -g vue-cli
  創建一個基於webpack模板的新項目: vue init webpack new-project

  輸入上面的命令后,下面的問題根據需要填寫就可以了
  Project name :項目名稱,如果不需要就直接回車。注:此處項目名不能使用大寫。
  Project description:項目描述,直接回車
  Author :作者
  vue build 構建方式(暫且這么解釋)
  兩個選擇(上下箭頭選擇,回車即為選定)
  1.Runtime + Compiler:recommended for most users
    (譯:運行+編譯:被推薦給大多數用戶)
  2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
    allowed in .vue files-render functions are required elsewhere
    (譯:只運行大約6KB比較輕量的壓縮文件,但只允許模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈現函數。翻譯不精准,意思大概是選擇該構建方式對文件大小有要求)
    這里推薦使用1選項,適合大多數用戶的
    install vue-router?是否安裝vue的路由插件,需要就選y,否則就n(以下均遵循此方法)
    Use ESLint to lint your code?是否使用ESLint檢測你的代碼?
  (ESLint 是一個語法規則和代碼風格的檢查工具,可以用來保證寫出語法正確、風格統一的代碼。)
  Pick an ESLint preset:選擇分支風格
  選項有三個
  1.standard(https://github.com/feross/standard) js的標准風格
  2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,這個github地址說是JavaScript最合理的方法
  3.none (configure it yourself) 自己配置
  Setup unit tests? 是否安裝單元測試(暫不詳細介紹)
  Pick a test runner 選擇一個單元測試運行器
  選項有三個
  1.Jest(Jest是由Facebook發布的開源的、基於Jasmine的JavaScript單元測試框架)
  2.Karma and Mocha
  3.none
  Setup e2e tests with Nightwatch(Y/n)?是否安裝E2E測試框架NightWatch(E2E,也就是End To End,就是所謂的“用戶真實場景”。)
  Should we run 'npm install' for you after the project has been created?(譯:項目創建后是否要為你運行“npm install”?這里選擇包管理工具)
  選項有三個
  yes,use npm(使用npm)
  yes,use yarn(使用yarn)
  no,I will handle that myself(自己操作)
  一路回車到此等待安裝完畢,會提示接下來的命令行
  ......
3、安裝依賴:
  cd new-project
  cnpm install
4、啟動: cnpm run dev

5、這個只能在本地跑,如果要在服務器上訪問,需要執行: cnpm run build

代碼總結如下:
cnpm install vue
cnpm install -g vue-cli
vue init webpack new-project
cd new-project
cnpm install
cnpm run dev

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM