Vue入門：Vue項目建立及啓動

1.建立Vue項目存放地址

用於存放Vue項目，找個本身處理方便的地方。本人地址：D:\Program Files\Workspace\Vue

2. 建立項目

進入cmd窗口 進入項目存放地址
執行命令【vue init webpack HelloWorld】建立Vue項目 [HelloWorld]爲項目保存文件夾名稱

錄入項目名稱

項目描述及做者

項目構建
選擇第一項

是否使用router

是否使用ESLint

是否使用單元測試

是否使用e2e測試

項目建立後是否執行安裝

選擇第一項 是

建立成功後提示

3. 啓動項目

進入項目根目錄下 執行【npm run dev】

啓動成功後提示

訪問瀏覽器

1. 項目結構說明（不完整）

|-- 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                    // 編譯器的配置,定義代碼格式
    |-- .eslintignore                    //忽略語法檢查的目錄文件
    |-- .eslintrc.js                     //編譯規則配置文件，規則定製文件，規則編譯不過的時候能夠在這裏配置爲0
    |-- .gitignore                       // git上傳須要忽略的文件格式,
    |-- favicon.ico                      // link圖標
    |--.postcssrc.js
    |-- index.html                       // 入口頁面
    |-- package.json                     // 項目基本信息如：能夠配置script腳本  ^上箭頭表明能夠安裝當前版本及以上的版本
    |-- README.md                        // 項目說明