2 4 使用vue cli建立專案 專案打包 發布

eslint：

用來做專案編碼規範檢查的工具；

基本原理: 定義了很多規則, 檢查專案的**一旦發現違背了某個規則就輸出相應的提示資訊；

有相應的配置, 可定製檢查；

命令：

npm install -g vue-cli ：全域性安裝vue腳手架，安裝完成到處可用

vue init webpack vue_demo：建立vue專案，webpack代表選擇的模板，總共有6中模板可用選擇【模板】，vue_demo是專案名

npm run dev：表示開發環境的打包執行(在記憶體中打包並將專案執行起來)，這裡的dev看的是專案下的package.json檔案（第8行），

也可以採用npm start命令， 效果是一樣的，也可以npm run build。執行起來後，預設沒有幫你啟動，我們可以通過

改動配置，讓他自動幫我們啟動(自動跳轉chrome瀏覽器);

npm run build：將專案編譯打包，打包完成後的資料夾叫dist

發布：

方式一 ：使用靜態伺服器工具包

npm install -g serve：全域性安裝靜態伺服器serve 

serve dist：執行打包後的專案，執行後就可以訪問了http://localhost:5000/

方式二：使用動態web伺服器(tomcat)

1. 建立專案

vue腳手架(vue-cli)是用來建立vue專案的工具包;

//建立專案:

npm install -g vue-cli //這個是安裝vue-cli的命令（已經安裝過了就不用再安裝了） -g：表示全域性安裝 可以通過命令 vue來檢視是否已經安裝過腳手架
vue init webpack vue_demo// webpack：表示模板名稱 vue_demo： 表示專案的名稱
開發環境執行:
cd vue_demo //注意看控制台的命令提示
npm install //

npm run dev // 將當前專案在記憶體中打包並執行 生產環境打包發布 npm run build npm install -g serve serve dist http://localhost:5000

2. 專案結構說明

-dev-server.js：通過express啟動後台服務

-index.js：指定的後台服務的埠號和靜態資源資料夾

mode_modules

src：原始碼資料夾

-main.js：應用入口js　　

static： 全域性資源

-.gitkeep：這個是給git服務的，git有乙個特點，如果乙個資料夾裡面什麼都沒有，那麼這個資料夾會被忽略，

但是又不希望這個資料夾被忽略，這次它就提供了乙個語法，就是在這個資料夾裡面建立乙個叫

.gitkeep的檔案，這個檔案裡面什麼都不用寫，那麼git就會把這個檔案和資料夾都版本控制起來.

.baberlrc：該檔案有兩個功能: 1) es6轉es5；2) jss轉js

.eslintignore：eslint檢查忽略的配置，哪些檔案會被忽略，不被檢查(配置哪些檔案、資料夾忽略檢查，eg: /*.js

表示根目錄下的所有js忽略檢查，*.js表示所有的js檔案都忽略檢查)

.eslintrc.js：eslint 檢查的配置 (在這個檔案裡可以忽略eslint的某些規則，讓其失效，eg: rules裡面滴28行加上: 'indent':'off')

.gitignore：git版本管理的忽略配置

index.html：主頁面檔案 

package.json：這是當前應用的描述檔案

readme.md： 應用描述說明的 readme 檔案 

main.js：入口檔案，如下

/*

入口js */
/*eslint-disable no-new 
*/new
vue()

vue使用vue cli建立專案

安裝執行環境 node和npm 安裝vue cli 檢視是否安裝成功vue v 安裝webpack 新建專案 1 vue init webpack 專案名稱 2 配置專案有關的資訊 專案名稱，開發者，描述，安裝路由，使用eslint 規範，測試單元 4 進入專案的資料夾下，使用npm run dev...

Vue cli3 0專案建立

之前寫過一篇文章vue cli專案建立,主要是針對vue cli3.0版本之前的，由於現在vue cli版本更新到了3.0，而且建立專案的一些情況也發生了變化，所以本篇將在基於vue cli3.0以上版本建立專案，大家可以參考一下vue cli2.0版本 這裡的vue cli3.0版本之前統稱為2....

Vue cli3專案建立

ps 如果之前安裝有cli2需要先解除安裝cli2才能安裝cli3 cli4 準備工作 檢視當前版本 vue v 或者 vue version1 安裝 解除安裝 cli2 全域性安裝 npm install vue cli g 全域性解除安裝 npm uninstall vue cli g cli3...