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:入口檔案,如下
/*index.html:主頁入口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...