vue2入門之vue-cli

vue-cli

• vue在web前端可謂是大放異彩，尤爲在國內與angular、react有三足鼎立之勢。不少人想入門vue2而又苦於不知從何下手。由於vue2是以組件化開發的，最好要搭配webpack構建工具開發，而webpack不少人還不能獨立配置。
  而vue-cli腳手架就能很好解決這一問題。即便你對webpack還不是很瞭解，你也能夠先搭建好項目在慢慢研究。由於cli已經所有幫咱們將須要的東西配置好了，你只要寫好項目的業務，在用命令行就能夠達到調試或打包的功能。

• 在這裏我會默認你們的電腦已經裝好node環境

---

利用npm對vue-cli進行全局安裝

npm install -g vue-cli

安裝成功後，在你的建立一個你的項目文件夾，cmd進入的文件夾

輸入命令：

接下來會有幾個要填的選項

• project name: 這個是你的項目名
• project description: 你的項目描述
• author： 做者
• Vue build： 編譯選第一個就行了，直接回車
• install vue-router： 是否裝路由
• use eslint to lint your code: 是否裝eslint檢查你的代碼規範（看我的，有些人被這個搞得要死要死的，不過我建議開啓。規範本身寫代碼的習慣，痛苦指示暫時的）
  Pick an ESLint preset (Use arrow keys)（選擇題）： 選擇一個ESLint預設標準
  Standard： 預設一（查看這個標準的詳情）
  AirBNB ： 預設二（查看這個標準的詳情）
  none： 自定義
• Setup unit tests(Y/n)： 是否安裝單元測試
• Setup e2e tests with Nightwatch(Y/n)： 是否安裝e2e測試

安裝完成

接下來你就能夠看到你的項目目錄了

這裏的各個文件夾所存放的分別是：

• build： webpack的配置文件(通常不用去動他)
• config: 這裏也是webpack的配置文件，不過是給咱們配置的
• src: 咱們的項目源代碼
• static: 靜態資源目錄（存放一些第三方js庫什麼的）
• .eslintrc.js: eslint的規則
• test: 若是裝了測試模塊的會有這個（初學者不建議先玩這個，先把基本功能搞定先）

build和config：

具體的功能我建議看hongchh的一篇文章寫的很詳細我就不必在寫一遍了vue-cli的webpack模板項目配置文件分析

src：

平時的代碼源碼都在這裏面寫就行了

static：

須要引入靜態資源，例如jq的一些插件庫，沒有npm和cdn的。將js放到這裏。而後在index.html裏引入：

<script src="./static/lib/jq.xxx.js"></script>

.eslintrc.js：

這裏能夠配置不須要哪一些規則具體的規則選項能夠查看eslint

rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

如何啓動項目

進入你的項目文件夾內先把依賴裝好（若是慢的話，能夠切到cnpm）

npm i

裝好相關依賴後再輸入命令啓動項目（開發模式）就能夠看到亮眼的v了

npm run dev

如何打包：

命令：

npm run build

打包完後你就會在你的項目文件夾裏發現一個dist的文件夾裏面就是打包完的項目

---

以上就是vue-cli所有使用(寫的不對或不足之處望指出)