手把手教你用vue-cli搭建vue項目

手把手教你用vue-cli搭建vue項目

本篇主要是利用vue-cli來搭建vue項目，其中前提是node和npm已經安裝好，文章結尾將會簡單提到一個簡單的例子。使用vue-cli搭建項目最開始我也是看網上的教程一步步搭下來，因此其中的一些步驟說法爲了表達正確會進行必定參考。

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

咱們使用vue-cli來搭建整個項目，vue-cli就是一個腳手架，步驟很簡單，輸入幾個命令以後就會生成整個項目，裏面包括了webpack、ESLint、babel不少配置等等，省了不少事。根據小高以前給的要求以及結合DSS項目中的經驗，咱們今天搭建的項目結構組成爲：

Vue+ ESLint + webpack + iview+ES6

Vue: 主要框架

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

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

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

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

2、 安裝vue-cli

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

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

此時vue-cli已經安裝好啦，往下走

3、 建立項目

1. cmd打開本身的項目工做空間，而後敲入命令：
   vue init webpack test（其中test爲個人項目名稱）
2. 而後終端會出現下圖「一問一答」模式，如圖：
   
   這裏有幾個須要說明一下，沒說明的直接回車選擇默認就好，對項目沒多大影響，很傻瓜式：

「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測試，這裏我也一樣選擇的是「N」

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

3.所有選擇好回車就進行了生成項目，最後生成的目錄結構以下圖：

此時項目已經基本搭建完成。接下來和你們說明一下目錄結構~

4、 目錄結構說明

1. build 文件夾：

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

2. config 文件夾：

如上圖，這幾個配置文件我以爲最主要的就是index.js 這個文件進行配置代理服務器，這個地方和咱們息息相關，和後臺聯調就是在這裏設置一個地址就能夠了。打開index.js 找到「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 運行

咱們接下來要作的就是業務相關的了，vue 就是一個個組件往裏面加就能夠了。

一個簡單的vue項目

在上面的基礎我寫了一個簡單的vue項目，主要改動的文件以下：

1. build/webpack.base.config.js

進行loader的配置，以及有一個iview的css文件不進行babel的處理，以下

1. src/router/index.js: import引入組件文件，根據vue-router寫上相應的路由配置

3.src/components:
業務代碼集中地，我作了一個簡單的，只有三個組件。而後在每一個組件中又分紅幾個組件構成，具體的語法須要自行學習vue

另外這個開發過程須要注意的是咱們這個項目是遵循ESLint規則，因此可能運行的時候會報一些錯誤，可是大多數都是和縮進、空格之類有關的，按照提示修改便可，以後代碼會在下一篇發出來。