使用 vue-cli 搭建項目

時間 2019-11-11

標籤使用 vue cli 搭建項目简体版

原文原文鏈接

vue-cli

vue-cli 是什麼及爲何要使用他：javascript

Vue 提供了一個官方的 CLI，爲單頁面應用 (SPA) 快速搭建繁雜的腳手架。它爲現代前端工做流提供了 batteries-included 的構建設置。只須要幾分鐘的時間就能夠運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔。css

注意：html

CLI 工具假定用戶對 Node.js 和相關構建工具備必定程度的瞭解。若是你是新手，咱們強烈建議先在不用構建工具的狀況下通讀指南，在熟悉 Vue 自己以後再使用 CLI。前端

好啦，通過以前的學習，如今應該也算是對 vue 和 webpack 有了「必定程度的瞭解」，直接就上手 vue-cli 試試吧~vue

使用 vue-cli

安裝 node.js

安裝完成後運行 npm install -g cnpm --registry=https://registry.npm.taobao.org 把 npm 鏡像替換成淘寶鏡像(安裝效率更高)java

全局安裝 vue-cli

運行 cnpm install -g vue-clinode

進入項目目錄後運行 vue init webpack my-projectwebpack

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 安裝包

而後就會開始建立項目。git

看到這裏就知道咱們已經成功地利用 vue-cli 腳手架建立了一個項目！web

這是項目下的文件主目錄：

│  .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 的目錄結構

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       // 源碼目錄
│  │  App.vue
│  │  main.js
│  ├─assets     // 資源目錄
│  │      logo.png
│  └─components     // vue公共組件
│          HelloWorld.vue
└─static    // 靜態文件

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

在 window 中(筆者使用「萬惡之源」- win10)生成目錄樹，汗顏我以前還上網查找了挺久，什麼關鍵詞 markdown / sourceTree，還覺得是 markdown 語法的一種，原來 window 自帶的命令 tree 就能實現這個功能。

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