Vue-cli項目建立

Vue-cli項目的建立

說明

最近在開發網站，項目運用到了Vue-cli這個腳手架工具，下面記錄一下vue-cli建立項目的一些步驟，爲本身的學習作相關筆記。

安裝

安裝node.js這是咱們的核心

1.下載 node.js

安裝步驟:一路next安裝好了或者自定義目錄(看我的)

2.安裝好了之後檢查一下是否安裝成功

1. 打開cmd 輸入node -v 是否顯示node版本號
2. 由於安裝成功後也安裝了npm 因此在cmd 輸入 npm -v 是否顯示npm版本號

3.安裝成功以下圖

4.通常狀況下可能會安裝cnpm鏡像(看我的網速) 打開cmd 安裝全局阿里巴巴鏡像文件 輸入:

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

5.驗證是否安裝cnpm成功 在cmd 顯示的是cnpm 安裝的路徑(如圖git-驗證)輸入:

cnpm -v

6.通常狀況下咱們下載Git 安裝

1. 在打開打開Git Bash Here
2. 在Git Bash Here 進行和cmd的輸入，咱們將獲得相同的結果，可是Git的功能更爲強大 ，代碼倉建立等等

7.以下圖所示

建立Vue-cli這裏進行兩種建立方式

Git(cmd命令行的模式)建立

打開Git Bash Here 全局安裝輸入：

npm install --global vue-cli 
或者是: 
cnpm install --global vue-cli

安裝完成後 打開Git Bash Here 查看vue安裝是否正確 輸入：

vue -V

通常安裝目錄在npm目錄下

如今咱們開始用vue-cli腳手架工具構建項目吧

建立一個文件夾如:MyVue/myvue-cli 打開Git Bash Here 輸入：
vue init webpack vuefirstdemo

註釋:

(1) 這裏建立Vue 的項目有幾種，常見的是:
      webpack 、webpack-simple、browserify、browserify-simple、simple等等，
      通常大型項目主要推薦webpack，而我的或者是業務邏輯並無那麼複雜的話推薦使用webpack-simple
  (2) vuefirstdemo:-----> 表示的是文件名，也就是項目名
  (3) Project name (vuefirstdemo)： ----->項目名稱，直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯：
      Sorry, name can no longer contain capital letters 應將項目名改成小寫(*)
  (4) Project description (A Vue.js project)： ---->項目描述(可寫可不寫)，也可直接回車，使用默認名字
  (5) Author ()： ---->做者,看做者本身，怎麼寫,默認也能夠。
  (6) Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，選擇便可推薦是：
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 
      僅運行時，已經有推薦了就選擇第一個了
  (7) Install vue-router? (Y/n) 是否安裝vue-router，看項目需求，輸入"y",回車則安裝，通常狀況下都會須要到。
  (8) Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的,這個是一個好的習慣，使用推薦你們使用。
  (9) Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
  (10) Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，這個看本身了
  (11) Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，也是看本身項目，直接回車

查看項目目錄

接下來分別介紹一下vue-cli項目中文件/目錄主要是幹什麼用的

(1). build:---->構建項目腳本目錄
(2). config:---->構建配置目錄：如端口號等
(3). node-modules:---->依賴的node庫文件
(4). src:---->主要源代碼編寫地方，
        assets:----->資源文件，如：css、img、js等，
        components:----->自定義組件編寫位置，
        router:----->路由，
        App.vue:----->vue 的根組件，
        main.js:----->主函數入口文件，
(5). static:----->靜態文件目錄
(6). test:----->測試文件目錄
(7). .eslintignore和.eslintrc.js:-----> ES語法的配置文件
(8). index.html: ------>入口文件
(9). package.json: ----->項目描述文件

接下來咱們運行建立的項目

在該項目下 打開Git Bash Here 直接輸入: 
  npm install 
若是報錯的話，咱們能夠用
  cnpm install

若是沒安裝cnpm請看上面 【1、首先咱們須要安裝node.js 這是咱們的核心】以下圖:

而後輸入: 
cnpm run dev

以下圖說明成功：

如今能夠進行訪問了，打開瀏覽器輸入:

http://localhost:8080

若是沒法打開那麼則說明是端口被佔用了，進入config/index.js文件進行修改端口從新運行

打包上線:

cnpm run build

第一種方式完成主要要記得幾個命令

cnpm install --global vue-cli  
vue init webpack 項目名<小寫>
cnpm install
cnpm run dev
cnpm run build

WebStorm 開發工具建立

打開WebStorm File--->New--->Project 以下圖:

選擇Vue.js 以下圖

注意: 固然，在這裏以前必定要先按照Node.js 還有Vue-cli 看上面【1、首先咱們須要安裝node.js 這是咱們的核心】 安裝方式

注意在location裏面的項目名必定要是小寫的否則不能經過
咱們還能夠根據項目的須要來建立幾種方式如:

webpack 、webpack-simple、browserify、browserify-simple、simple等等 這裏我選擇 webpack 
而後點擊---->Next

Starting Vue CLI... Vue-cli 項目加載中

輸入項目名 注意:項目名必須是小寫

項目說明( 對項目介紹一句話)

輸入做者(默認便可)我這裏輸入「xiaoming」

選擇webpack Vue build 選項 (默認便可)

是否安裝路由 Vue-router (默認安裝)

是否安裝ESLint 編碼方式

選擇ESLint 方式(默認便可)

是否安裝test(默認安裝吧)

選擇Pick a test runner 方式（默認便可）

是否安裝Nightwatch E2E 測試方式（默認便可）

選擇項目建立方式npm

項目建立成功

接下來咱們如何運行Webstorm裏建立的項目呢？

打開Webstorm Terminal

直接輸入：
  cnpm install
  cnpm run dev
打包發佈：
  cnpm run build
訪問網址:
  http://localhost:8080

在Webstorm 配置運行環境

測試

瀏覽器運行

訪問網址:

http://localhost:8080

總結

建立Vue-cli項目完成

主要在開發過程當中不斷的提升自我 接下來就是在開發過程當中分享一些坑和知識