Vue腳手架(vue-cli)安裝總結
單頁Web應用(single page web application,SPA),就是只有一張Web頁面的應用,是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。
提供一個官方命令行工具,可用於快速搭建大型單頁應用(SPA)。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目:
1 # 全局安裝 vue-cli 2 $ npm install --global vue-cli 3 # 創建一個基於 webpack 模板的新項目 4 $ vue init webpack my-project5 # 安裝依賴,走你 6 $ cd my-project 7 $ npm install 8 $ npm run dev
註意:CLI 工具假定用戶對 Node.js 和相關構建工具有一定程度的了解。如果你是新手,我們強烈建議先在不用構建工具的情況下通讀指南,在熟悉 Vue 本身之後再使用 CLI。
1.1、環境搭建
1.1.1、安裝node.js
從node.js官網下載並安裝node,安裝過程很簡單,一路“下一步”就可以了。安裝完成之後,打開命令行工具(win+r,然後輸入cmd),輸入 node -v,如下圖,如果出現相應的版本號,則說明安裝成功。
如果安裝不成功,可以直接把安裝包修改成壓縮包,解壓後配置環境變量也可以,就成了綠色版。
這裏需要說明下,因為在官網下載安裝node.js後,就已經自帶npm(包管理工具)了,另需要註意的是npm的版本最好是3.x.x以上,以免對後續產生影響。
註意版本不能太低,如果您已經安裝了低版本的node可以使用npm直接更新。
1.1.2、修改npm為淘寶鏡像
因為npm的倉庫有許多在國外,訪問的速度較慢,建議修改成cnpm,換成taobao的鏡像。
打開命令行工具,復制如下配置:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝這裏是因為我們用的npm的服務器是外國,有的時候我們安裝“依賴”的時候很很慢很慢超級慢,所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之後輸入 cnpm -v,如下圖,如果出現相應的版本號,則說明安裝成功。
版本號:
1.1.3、安裝webpack
安裝webpack,打開命令行工具輸入:
npm install webpack -g
安裝完成之後輸入
webpack -v
如下圖,如果出現相應的版本號,則說明安裝成功。
1.1.4、安裝vue-cli腳手架構建工具
打開命令行工具輸入:
cnpm install vue-cli -g
安裝完成之後輸入 vue -V(註意這裏是大寫的“V”),如下圖,如果出現相應的版本號,則說明安裝成功。
2.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 // 項目基本信息
2.3、運行項目
6)、啟動項目,輸入:npm run dev。服務啟動成功後瀏覽器會默認打開一個“歡迎頁面”,如下圖:
編譯成功後可以直接在瀏覽器中查看項目:
Vue腳手架(vue-cli)安裝總結