## 基本使用 我們可以使用vue-cli來快速生成一個基于webpack構建的項目。 首先需要在命令行中進入到項目目錄，然后輸入 ~~~ vue init webpack my-project ~~~ 執行命令后，會有一些命令行交互，我們可以初始化一些項目信息，如圖  配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創建的一個基于 webpack 的 vue.js 項目 然后進入項目目錄（cd Vue-Project），使用 cnpm或npm 安裝依賴 ~~~ cnpm install ~~~ 或 ~~~ npm install ~~~ 依賴安裝完成后，我們來看一下項目的目錄結構，如下所示： ~~~ . |-- 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 // 項目基本信息 . ~~~ 然后啟動項目 ~~~ npm run dev ~~~  如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js  建議將端口號改為不常用的端口。另外我還將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因為打包之后，外部引入 js 和 css 文件時，如果路徑以 ' / ' 開頭，在本地是無法找到對應文件的（服務器上沒問題）。所以如果需要在本地打開打包后的文件，就得修改文件路徑。