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

2022-03-06 09:56:00 字數 2533 閱讀 2184

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
注意: 專案名vue_demo不能包含大寫字母,

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()

index.html:主頁

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...