Vue-CLI腳手架--快速應用建立

Vue中文文檔：https://github.com/vuejs/vue-docs-zh-cn

參考文檔：

一、vue-cli的搭建問題：http://www.javashuo.com/article/p-esalvvky-dn.html

二、vue-cli的跨域問題：

http://www.javashuo.com/article/p-nojsmppd-t.html

http://liubf.com/2018/11/15/vuecli項目如何在開發環境和生產環境中經過反向代理/

1、Vue-CLI介紹

　　vue腳手架指的是vue-cli，它是一個專門爲單頁面應用快速搭建繁雜的腳手架，它能夠輕鬆的建立新的應用程序並且可用於自動生成vue和webpack的項目模板。vue-cli是有Vue提供的一個官方cli，專門爲單頁面應用快速搭建繁雜的腳手架。它是用於自動生成vue.js+webpack的項目模板，是爲現代前端工做流提供了 batteries-included的構建設置。只須要幾分鐘的時間就能夠運行起來並帶有熱重載，保存時 lint 校驗，以及生產環境可用的構建版本。

2、Vue-CLI的安裝

　　在安裝vue以前須要先安裝好node.js，站點最好設置成國內的否則會很卡，如阿里的（。。）。

安裝步驟：

#一、全局安裝vue-cli
$ npm install -g vue-cli
#二、建立一個基於webpack模板的新項目
$ vue init webpack my-project
#三、安裝依賴，運行
$ cd my-project
$ npm install
$ npm run dev
#這時能夠經過localhost:8080進行訪問了（出現vue歡迎頁面）
#注：一、經過npm list -g vue-cli（全局）或者npm list vue-cli（本地）查看安裝vue-cli的版本信息；
#二、ctrl + c 退出，終止批處理操做

　　三、全局安裝時，具體的選項以下：

 3、安裝後的相關目錄說明：

|-- my-project
  |-- build 存放webpack的相關配置以及腳本文件
    |-- build.js 生產環境構建代碼
    |-- check-version.js 檢查node、npm等版本
    |-- dev-client.js 熱重載相關
    |-- dev-server.js 構建本地服務
    |-- utils.js 構建工具相關
    |-- vue-loader.config.js css加載器配置
    |-- webpack.base.conf.js webpack基礎配置
    |-- webpack.dev.conf.js webpack開發環境配置
    |-- webpack.prod.conf.js webpack生產環境配置
    |-- webpack.test.conf.js webpack測試環境配置 
  |-- config vue基本配置文件，好比監聽端口，打包輸出等相關配置
    |-- dev.env.js 開發環境變量
    |-- index.js 項目配置文件
    |-- prod.env.js 生產環境變量
    |--test.env.js 測試環境變量
  |-- dist 打包文件，打包後纔會有此文件（即，npm run build）
  |-- node_mudiles 依賴的node工具包目錄
  |-- src 資源目錄，也就是之後咱們代碼開發的地方
    |-- assets 靜態資源目錄，js、css之類的能夠放在這下面
    |-- comoonments 共用組件編寫的地方
    |-- router 路由文件夾，配置頁面跳轉
    |-- app.vue 頁面級vue組件，整個應用全部單文件組件的父組件
    |-- main.js 頁面入口js文件，加載各類公共組件
  |-- static 靜態資源，主要存放圖片、json數據之類的
  |--test 單元測試、代碼測試
  |-- .babelrc ES6語法編譯配置、用來將ES6代碼轉化爲瀏覽器識別的代碼
  |-- .editorconfig 定義代碼格式
  |-- .eslintignore ESLint檢查忽略的文件
  |-- .eslintrc.js ESLint文件，如須要更改規則在此文件添加
  |-- .gitignore git上傳須要忽略的文件
  |-- .postcssrc.js 轉換css工具
  |-- index.html 頁面入口文件
  |-- package.json 項目配置文件，項目開發所需模塊，項目名稱，版本等
  |-- README.md 項目說明文件
  
詳細說明：
1.build文件夾，存放webpack的相關配置以及腳本文件，在實際開發過程當中只會偶爾用到webpack.ba  se.conf.js，配置less、babel等編譯器；
2、config文件夾，整個應用的配置文件，通常的話咱們不須要修改，能夠在index.js裏配置開發環境的端口號、是否開啓熱載或者設置生產環境的靜
態資源想讀路徑、是否開啓gzip壓縮，以及配置代理，解決跨域問題(僅適用與開發模式)，詳情可查閱 https://vuejs-templates.github.io/webpack/proxy.html。
也存放了npm run build命令打包生成的靜態資源名稱和路徑等。
3、node_mudiles，依賴的node工具包目錄，存放npminstall命令下載的開發環境和生產環境的各類依賴。

 

http://liubf.com/2018/11/15/vuecli%E9%A1%B9%E7%9B%AE%E5%A6%82%E4%BD%95%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%92%8C%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E9%80%9A%E8%BF%87%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86/