Vue腳手架Vue-cli(命令行和圖形化初始化項目)

1、Vue-cli安裝

vue-cli是vue官方提供的腳手架工具，默認搭建好了一個項目的基本架子，咱們在其基礎上進行相應修改便可。

全局安裝：

npm install -g @vue/cli

查看是否安裝成功：

2、命令行方式

一、建立項目

npm   create  '項目名 '

二、手動選擇配置選項

 咱們這裏選擇手動方式。

三、選擇須要的依賴

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。
( ) TypeScript// TypeScript是一個JavaScript（後綴.js）的超集（後綴.ts）包含並擴展了 JavaScript 的語法，須要被編譯輸出爲 JavaScript在瀏覽器運行
( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態管理模式）
( ) CSS Pre-processors // CSS 預處理器（如：less、sass）
( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end） 測試

咱們這裏選擇：Babel、CSS預處理兩個就能夠了，簡單測試demo。

Babel是將高階（es6）語法轉化成低階（es5）的。

CSS預處理是指能夠將less、sass等轉成普通css。

 

4. 選擇css 預處理

 

 

五、選擇配置文件存放方式

 

 

六、是否將配置保留模板

 

七、開始安裝依賴包

 

八、安裝完成

九、目錄結構

 

各個目錄和文件的做用：

node_modules    依賴包

public    渲染總入口文件，結果都渲染在index.html文件中

src  源碼目錄

.gitignore  git忽略設置

babel.config.js  babel設置

package.json   依賴包文件

README.md    說明文件

 

3、VUE ui界面安裝

一、啓動ui界面

 

 

二、建立項目

 

 

 

 三、輸入安裝項目的文件夾和包管理器，這裏選擇npm包管理

 

 

四、選擇手動安裝配置

 

五、配置打包工具babel、Router路由管理、Vuex狀態管理、CSS預處理、質量檢測eslint、使用配置文件

 

 

 六、選擇CSS預處理和eslint格式化文件

 

 七、是否保存爲預設文件，這裏選擇不保存

 

 

八、建立項目

 

 

 

 九、目錄結構

 

 各文件解析

package.json  定義了項目的信息，包括項目名稱、版本、啓動腳本、項目依賴，開發依賴
babel.config.js  babel打包的配置文件
postcssrc.js  css自動補充一些兼容性代碼的設置
.gitignore  git版本忽略文件
.eslintrc.js  配置eslint配置文件，自定義規則

public公共文件
public/index  模板文件，webpack在打包的時候會使用這個文件，生成最後的index.html
public/favicon.ico 默認小圖標

src  主文件
assets 靜態資源文件：圖片、字體、圖標
components  組件，從代碼中抽離出能夠複用的邏輯，抽象成一個組件以便複用
router  路由管理 
store   vuex狀態管理
views  視圖，頁面文件
App.vue 基礎組件
main.js    項目入口文件

　　

十、項目結構搭建

github地址：

 https://github.com/loveqx/vue-init