Vue腳手架（vue-cli）安裝總結

時間 2019-11-13

標籤 vue 腳手架 cli 安裝總結简体版

原文原文鏈接

單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。html

提供一個官方命令行工具，可用於快速搭建大型單頁應用（SPA）。該工具爲現代化的前端開發工做流提供了開箱即用的構建配置。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：前端

1 # 全局安裝 vue-cli
2 ＄ npm install --global vue-cli
3 # 建立一個基於 webpack 模板的新項目
4 ＄ vue init webpack my-project
5 # 安裝依賴，走你
6 ＄ cd my-project
7 ＄ npm install
8 ＄ npm run dev

注意：CLI 工具假定用戶對 Node.js 和相關構建工具備必定程度的瞭解。若是你是新手，咱們強烈建議先在不用構建工具的狀況下通讀指南，在熟悉 Vue 自己以後再使用 CLI。vue

1.一、環境搭建

1.1.一、安裝node.js

從node.js官網下載並安裝node，安裝過程很簡單，一路「下一步」就能夠了。安裝完成以後，打開命令行工具(win+r，而後輸入cmd)，輸入 node -v，以下圖，若是出現相應的版本號，則說明安裝成功。node

若是安裝不成功，能夠直接把安裝包修改爲壓縮包，解壓後配置環境變量也能夠，就成了綠色版。webpack

這裏須要說明下，由於在官網下載安裝node.js後，就已經自帶npm（包管理工具）了，另須要注意的是npm的版本最好是3.x.x以上，以避免對後續產生影響。git

注意版本不能過低，若是您已經安裝了低版本的node可使用npm直接更新。web

1.1.二、修改npm爲淘寶鏡像

由於npm的倉庫有許多在國外，訪問的速度較慢，建議修改爲cnpm，換成taobao的鏡像。vue-router

打開命令行工具，複製以下配置：vuex

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝這裏是由於咱們用的npm的服務器是外國，有的時候咱們安裝「依賴」的時候很很慢很慢超級慢，因此就用這個cnpm來安裝咱們說須要的「依賴」。安裝完成以後輸入 cnpm -v，以下圖，若是出現相應的版本號，則說明安裝成功。vue-cli

版本號：

1.1.三、安裝webpack

安裝webpack，打開命令行工具輸入：

npm install webpack -g

安裝完成以後輸入

webpack -v

以下圖，若是出現相應的版本號，則說明安裝成功。

1.1.四、安裝vue-cli腳手架構建工具

打開命令行工具輸入：

cnpm install vue-cli -g

安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。

2.二、構建項目

1)、在硬盤上找一個文件夾放工程用的。這裏有兩種方式指定到相關目錄：

①cd 目錄路徑

②若是以安裝git的，在相關目錄右鍵選擇Git Bash Here

2)、安裝vue腳手架輸入：vue init webpack projectName，注意這裏的「projectName」是項目的名稱能夠說是隨便的起名，可是「不能用中文」。

提示選擇項：

$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裏說明將要建立一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------項目名稱
? Project name exprice
? Project description (A Vue.js project) ---------------------項目描述
? Project description A Vue.js project
? Author Datura --------------------- 項目建立者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啓用eslint檢測規則，這裏我的建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 這裏說明如何啓動這個服務
cd exprice
npm install
npm run dev

View Code

3）、cd 命令進入建立的工程目錄，首先cd projectName；

4）、安裝項目依賴：npm install，由於自動構建過程當中已存在package.json文件，因此這裏直接安裝依賴就行。不要從國內鏡像cnpm安裝(會致使後面缺了不少依賴庫)，可是可是若是真的安裝「個把」小時也沒成功那就用：cnpm install 吧

5）、安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource，輸入：cnpm install vue-router vue-resource --save。

|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各類公共組件
|-- static                           // 靜態文件，好比一些圖片，json數據等
|   |-- data                           // 羣聊分析獲得的數據用於數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息