VUE進階篇Part10(使用vue-­cli腳手架一鍵搭建工 程)

按照這個來配置就好了,這裏相當於是幫你把webpack需要的繁瑣的配置給你都弄好了,然後你直接從那裏全部下下來就可以

記得先下好nodejs,安裝的代碼記得全都c v,不要自己敲

安裝完nodejs之後再安裝淘寶npm鏡像,安裝完了之後後面的安裝速度會快一點

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

然後按照下面的五步流程一個一個來

1、全局安裝vue­cli

npm install -g vue-cli

2、進入目錄–初始化項目

vue init webpack my-project	//這個要進入項目目錄再用,會創建一個my-project的文件夾

3、進入項目

cd my-project

4、安裝依賴

npm install

5、啓動項目

npm run dev

以上執行完後會出現一個 my-project 項目文件夾,用vscode打開後會看到以下目錄
在這裏插入圖片描述
下面解釋一下這些文件及目錄分別是幹什麼的

目錄結構的分析

1、bind

├── build // 項目構建(webpack)相關代碼 記憶:(夠賤) 9個
│ ├── build.js // 生產環境構建代碼
│ ├── check­versions.js // 檢查node&npm等版本
│ ├── dev­client.js // 熱加載相關
│ ├── dev­server.js // 構建本地服務器
│ ├── utils.js // 構建配置公用工具
│ ├── vue­loader.conf.js // vue加載器
│ ├── webpack.base.conf.js // webpack基礎環境配置
│ ├── webpack.dev.conf.js // webpack開發環境配置
│ └── webpack.prod.conf.js // webpack生產環境配置

2、config

├── config// 項目開發環境配置相關代碼 記憶: (環配) 3個
│ ├── dev.env.js // 開發環境變量(看詞明意)
│ ├── index.js //項目一些配置變量
│ └── prod.env.js // 生產環境變量

3、node_modules

├──node_modules// 項目依賴的模塊 記憶: (依賴) *個

4、src

├── src// 源碼目錄 5

1
│ ├── assets// 資源目錄
│ │ └── logo.png
2
│ ├── components// vue公共組件
│ │ └── Hello.vue
3
│ ├──router// 前端路由
│ │ └── index.js// 路由配置文件
4
│ ├── App.vue// 頁面入口文件(根組件)
5
│ └── main.js// 程序入口文件(入口js文件)

5、static

└── static// 靜態文件,比如一些圖片,json數據等
│ ├── .gitkeep

6、剩餘的文件

├── .babelrc// ES6語法編譯配置
├── .editorconfig// 定義代碼格式
├── .gitignore// git上傳需要忽略的文件格式
├── index.html// 入口頁面
├── package.json// 項目基本信息
├── README.md// 項目說明

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章