基於vue2.0搭建項目流程

時間 2019-11-20

標籤基於 vue2.0 vue 搭建項目流程简体版

原文原文鏈接

搭建vue2.0項目——myproject

1、環境搭建：

1 打開命令行（cmd）
2 安裝node node官網
3 安裝 vue-cli步驟以下:

npm install -g vue-cli    // 全局安裝
vue  -v    // 查看vue版本

項目初始化：

vue init webpack my-project

期間會有一些選項的設置，可參考如下安裝截圖
css

安裝依賴並運行項目

cd my-project
npm install    // install 過程會比較慢，由於要下載一些依賴包(固然你也能夠選擇 cnpm 安裝)，完成後 目錄下 會多了一個 node_modules 文件夾
npm run dev

成功的話，在瀏覽器輸入localhost:8080並回車，頁面會出現以下：
html

淘寶鏡像安裝方法(改步可忽略)

1安裝cnpm

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

2 輸入cnpm -v輸入是否正常

cnpm -v

2、項目目錄結構分析：

.
|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各類公共組件
|-- static                           // 靜態文件，好比一些圖片，json數據等
|   |-- data                           // 羣聊分析獲得的數據用於數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息
.