第一章 vue-cli 搭建VUE項目

首先安裝好node和npm，vscode

node：是一個基於 Chrome V8 引擎的 JavaScript 運行環境，和NPM一塊兒管理包

NPM: 隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

1.容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
2.容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
3.容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

vscode: 開發工具

1、 項目使用技術、框架簡單介紹

咱們使用vue-cli來搭建整個項目，vue-cli就是一個腳手架，步驟很簡單，輸入幾個命令以後就會生成整個項目，裏面包括了webpack、ESLint、babel不少配置等等，省了不少事。

Vue主要框架

ESLint: 幫助咱們檢查Javascript編程時的語法錯誤，這樣在一個項目中多人開發，能達到一致的語法

Webpack: 設置代理、插件和loader處理各類文件和相關功能、打包等功能。整個項目中核心配置

iview: 是基於vue的一套樣式框架，裏面有不少封裝好的組件樣式

ES6: 緊跟時代潮流，使用ES6語法，利用babel處理。

搭建vue-cli命令：

1.打開cmd ,敲入命令：npm install --global vue-cli （–global：全局安裝）

2.安裝好以後打開C:UsersstaffAppDataRoamingnpmnode_modules 能夠看到這個文件夾下已經有相關的腳本文件，如圖：

二.建立項目
cmd打開本身的項目工做空間，而後敲入命令：

vue init webpack onePage（其中test爲個人項目名稱）

一步一步根據提示創建

「Project name」：這個是項目名稱，默認是輸入時的那個名稱，想改的話直接輸入修改，也能夠直接回車

「Install vue-router」:是否須要vue-router，這裏默認選擇使用，這樣生成好的項目就會有相關的路由配置文件

「Use ESLint to lint your code」:是否使用ESLint，剛纔說了咱們這個項目須要使用因此也是直接回車，默認使用，這樣會生成相關的ESLint配置

「Setup unit tests with Karma + Moch?」: 是否安裝單元測試,若是如今尚未單元測試，選擇的是」N」，而不是直接回車

「Setup e2e tests with Nightwatch」：是否安裝e2e測試，這裏我也一樣選擇的是「Y」（能夠選N）

這幾個配置選擇yes 或者 no 對於咱們項目最大的影響就是，若是選擇了yes 則生成的項目會自動有相關的配置，有一些loader咱們就要配套下載。因此若是咱們肯定不用的話最好不要yes，否則下一步要下不少沒有用的loader（加載）

目錄說明：

build目錄:

這個文件夾主要是進行webpack的一些配置
就我我的以爲啊,對咱們最有用而且可能會使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三個webpack的配置文件，分別是基本webpack配置、開發環境配置、生產環境配置。實際上這些文件裏面的內容，一些簡單的配置都已經有了，包括入口文件、插件、loader、熱更新等都已經配置好了。
咱們要作的只是根據本身的項目有什麼loader須要增長的，好比生成環境須要加上UglifyJsPlugin插件等能夠自行配置，或者一些插件增長或者不須要的刪除，其實都是和業務相關了，其餘的均可以不須要動。

config:

這幾個配置文件我以爲最主要的就是index.js 這個文件進行配置代理服務器，這個地方和咱們息息相關，和後臺聯調就是在這裏設置一個地址就能夠了。打開index.js 找到「proxyTable「這個屬性，而後在裏面加上對應的後臺地址便可

proxyTable:在平時項目的開發環境中，常常會遇到跨域的問題，尤爲是使用vue-cli這種腳手架工具開發時，因爲項目自己啓動本地服務是須要佔用一個端口的，因此必然會產生跨域的問題。固然跨域有多種解決方式，這裏就不一一例舉，下次弄篇文章單獨講，在使用webpack作構建工具的項目中使用proxyTable代理實現跨域是一種比較方便的選擇。

實現機制：本地服務器 --》 代理 --》目標服務器 --》拿到數據後經過代理假裝成本地服務請求的返回值 ---》而後瀏覽器就順利收到了咱們想要的數據

3. src文件夾：

這個文件夾是整個項目最主要以及使用頻率最高的文件夾。

「assets」: 共用的樣式、圖片

「components」: 業務代碼存放的地方，裏面分紅一個個組件存放，一個頁面是一個組件，一個頁面裏面還會包着不少組件，通常本身編寫的組件都會放在這個文件夾

「router」: 設置路由

「App.vue」: vue文件入口界面

「main.js：對應App.vue 建立vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置

4.static 文件夾：

存放的文件不會通過webpack處理，能夠直接引用，例如swf文件若是要引用能夠在webpack配置對swf後綴名的文件處理的loader，也能夠直接將swf文件放在這個文件夾引用

5.package.json:

這個文件有兩部分是有用的：scripts 裏面設置命令，例如設置了dev用於調試則咱們開發時輸入的是
npm run dev ；例如設置了build 則是輸入 npm run build 用於打包;另外一部分是這裏能夠看到咱們須要的依賴包,在dependencies和devDependencies中，分別對應全局下載和局部下載的依賴包

5、 下載依賴包

上一步咱們已經生成好項目，如今打開以前說過的package.json 文件，找到devDependencies 和 dependencies ，在這裏面能夠刪掉咱們不須要的，其餘就則都須要使用 npm install 下載安裝，例如vue： npm install vue –save-dev

這個過程會生成一個node_modules 文件夾，這一個過程可能會有一點耗時間，可是也是傻瓜式，一個個下載，下載好以後輸入npm run dev 。若是有哪些缺漏的都會提示再補下載就行了

6、 npm run dev

當全部依賴包都下載好以後，輸入命令：npm run dev 運行就能夠看到一個自帶的默認頁面打開。此時項目就已經所有搭建好而且運行了~炒雞簡單吧，總結下來其實只有四步

npm install --global vue-cli 下載vue-cli腳手架
vue init webpack test 生成項目，造成基本結構
npm install 依賴包
npm run dev 運行

七 配置ESLINT

啓動發覺報錯，原來咱們是用了eslint檢查格式，咱們要使用自動格式化成eslint支持的格式
安裝eslint

二、打開用戶配置
文件 -> 首選項 -> 設置

在用戶設置中填寫以下配置：
二、打開用戶配置

文件 -> 首選項 -> 設置
在用戶設置中填寫以下配置：

替換成下面的

"eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

eslint.autoFixOnSave 用來進行保存時自動格式化，可是默認只支持 javascript .js 文件

eslint.validate 用來配置做用的文件類型。

而後按ctrl+s 就會自動格式化

最後輸出：

參考：
https://www.cnblogs.com/liaoa...
https://www.cnblogs.com/wanch...
http://www.ptbird.cn/vscode-a...