使用 vue cli 搭建專案

vue-cli 是什麼及為什麼要使用他：

vue 提供了乙個官方的 cli，為單頁面應用 (spa) 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries-included 的構建設定。只需要幾分鐘的時間就可以執行起來並帶有熱過載、儲存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 vue cli 的文件。

注意：

cli 工具假定使用者對 node.js 和相關構建工具有一定程度的了解。如果你是新手，我們強烈建議先在不用構建工具的情況下通讀指南，在熟悉 vue 本身之後再使用 cli。

好啦，經過之前的學習，現在應該也算是對 vue 和 webpack 有了「一定程度的了解」，直接就上手 vue-cli 試試吧~

安裝完成後執行npm install -g cnpm --registry=把 npm 映象替換成**映象(安裝效率更高)

執行cnpm install -g vue-cli

進入專案目錄後執行vue init webpack my-project

vue init webpack vue-cli-project project name vue-cli-project // 專案名稱 project description // 專案描述 author no1harm //專案作者 vue build standalone // 選擇編譯執行方式，因為 vue 推薦 runtime + compiler，所以直接回車就好了 install vue-router? no // 是否使用 vue-router，根據專案需要選擇 use eslint to lint your code? no // 是否使用eslint管理**，根據專案需要選擇 set up unit tests no // 是否安裝單元測試，根據專案需要選擇 setup e2e tests with nightwatch? no // 是否安裝e2e測試，根據專案需要選擇 should we run `npm install` for you after the project has been created? (recommended) npm // 使用 npm 安裝包

然後就會開始建立專案。

看到這裡就知道我們已經成功地利用 vue-cli 腳手架建立了乙個專案！

這是專案下的檔案主目錄：

│ .babelrc │ .editorconfig │ .gitignore │ .postcssrc.js │ index.html │ package-lock.json │ package.json │ readme.md ├─build ├─config ├─node_modules ├─src └─static

對了，我們還需要給專案安裝一下依賴。

執行cnpm install

執行npm run dev

按照指示在瀏覽器中開啟http://localhost:8081

我們的 vue 專案已經執行成功~！

vue-cli 生成目錄結構的分析：

│ .babelrc // es6語法編譯配置 │ .editorconfig // 定義**格式 │ .gitignore // git上傳需要忽略的檔案格式 │ .postcssrc.js // postcss 配置檔案 │ index.html // 入口頁面 │ package-lock.json │ package.json // 專案基本資訊 │ readme.md // 專案說明 ├─build // 專案構建(webpack)相關** │ build.js // 生產環境構建** │ check-versions.js // 檢查node&npm等版本 │ logo.png │ utils.js // 構建配置公用工具 │ vue-loader.conf.js // vue載入器 │ webpack.base.conf.js // webpack基礎環境配置 │ webpack.dev.conf.js // webpack開發環境配置 │ webpack.prod.conf.js // webpack生產環境配置 ├─config // 專案開發環境配置相關** │ dev.env.js // 開發環境變數 │ index.js // 專案一些配置變數 │ prod.env.js // 生產環境變數 ├─node_modules // 專案依賴的模組 ├─src // 原始碼目錄 │ │ main.js │ ├─assets // 資源目錄 │ │ logo.png │ └─components // vue公共元件 │ helloworld.vue └─static // 靜態檔案

另外，剛學習到了乙個小竅門~

另外，linux 中也可以使用 tree 命令，在此就不演示了。

tree [drive:[[path] [/f] [/a]

其中:可以使用tree -l 檔名 >readme.md

使用 vue cli 搭建專案

使用 vue cli 搭建專案

Vue 使用 vue cli 搭建專案

使用vue cli快速搭建專案

使用 vue cli 搭建專案

使用 vue cli 搭建專案

Vue 使用 vue cli 搭建專案

使用vue cli快速搭建專案

相關推薦