vue-cli快速搭建Vue腳手架 （vue-cli 2.x 模板）

一、確保已經安裝了npm 或者 yarn

　　查看是否安裝了npm或yarn：在控制檯輸入npm -v 或 yarn -v 能看到版本號就表明已經安裝

　　（注意：Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)）

二、全局安裝vue腳手架工具 vue-cli

    (這裏安裝的是vue-cli 2.X 的腳手架工具）

yarn global add vue-cli
# OR
npm install -g vue-cli

   安裝後，能夠在控制檯輸入 vue --version 驗證是否安裝成功）

   另：

  　　若是要安裝3.X的腳手架工具，輸入命令：

yarn global add @vue/cli
# OR
npm install -g @vue/cli

//若是是用3.X的腳手架工具，還須要安裝@vue/cli-init才能使用 vue init命令
yarn global add @vue/cli-init
# OR
npm install -g @vue/cli-init

三、使用vue-cli初始化項目

控制檯切換到你的項目存放路徑，輸入：

vue init <template-name> <project-name>

<template-name> : 模板名稱，vue-cli提供了5中模板：
①webpack : 一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。
②webpack-simple : 一個簡單webpack+vue-loader的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。
③browserify : 一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
④browserify-simple : 一個簡單Browserify+vueify的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。
⑤simple : 一個最簡單的單頁應用模板。

<project-name> : 項目名稱（不能包含大寫字母，不然會報錯）

例：

vue init webpack my-vue

　　輸入命令後，會詢問一些選項：

　　　　注意：

　　　　①Use ESLint to line your code ?選擇 No   ----ESLint的不少規範和咱們平時開發的習慣不太一致，因此這裏不建議使用

　　　　②Should we run `npm install` for you after the project has been created?選擇No, I will handle that myself　　----我安裝的時候，選擇Yes,use Yarn最後卡在了最後一步，可是選擇No之後，再本身執行yarn 就成功了。。。。

　　　　

四、進入到 my-vue 目錄下，安裝package.json 文件中的依賴包

>cd my-vue

>yarn     //強烈推薦使用yarn
或
>npm install

　　如圖：

　　

　　輸入命令後等待依賴包安裝完成便可

　　（注意，yarn安裝自動生成的yarn.lock 存放了安裝過程當中的重要信息，必定要放到版本控制當中，不然多人共同開發可能會引發一些錯誤）

五、運行項目

　　輸入如下命令：

yarn run dev
# OR
npm run dev

而後便可在瀏覽器中輸入 localhost:8080 瀏覽：

六、vue項目目錄說明：

├── build/                      # webpack 編譯任務配置文件: 開發環境與生產環境
│   └── ...
├── config/                     
│   ├── index.js                # 項目核心配置
│   └── ...
├ ── node_module/               #項目中安裝的依賴模塊
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue組件
│   ├── components/             # 組件
│   │   └── ...
│   └── assets/                 # 資源文件夾，通常放一些靜態資源文件
│       └── ...
├── static/                     # 純靜態資源 (直接拷貝到dist/static/裏面)
├── test/
│   └── unit/                   # 單元測試
│   │   ├── specs/              # 測試規範
│   │   ├── index.js            # 測試入口文件
│   │   └── karma.conf.js       # 測試運行配置文件
│   └── e2e/                    # 端到端測試
│   │   ├── specs/              # 測試規範
│   │   ├── custom-assertions/  # 端到端測試自定義斷言
│   │   ├── runner.js           # 運行測試的腳本
│   │   └── nightwatch.conf.js  # 運行測試的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 編輯配置文件
├── .gitignore                  # 用來過濾一些版本控制的文件，好比node_modules文件夾 
├── index.html                  # index.html 入口模板文件
└── package.json                # 項目文件，記載着一些命令和依賴還有簡要的項目描述信息 
└── README.md                   #介紹本身這個項目的，可參照github上star多的項目。
build/