vue-cli “從入門到放棄”

Joyven 發布于2019-08-29 13:05 / 723人閱讀

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。

主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試

在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，小生表示很遺憾。而 vue-cli 作為官方推薦的快速構建 vue 項目的腳手架，你應該學會使用，本文將介紹如何使用 vue-cli。

在使用vue-cli前，希望你具備以下條件：

扎實的 JavaScript / HTML / CSS 基本功

通讀官方教程 (guide) 的基礎篇

這里我就不再贅述什么是 Vue.js 了，請需要了解的同學前往：

vuejs.org／中文文檔

GitHub

查看相關資源信息。

安裝

檢查是否安裝 node.js, 如果沒有請根據您的系統安裝

node -v
v8.00

全局安裝 vue-cli

npm install -g vue-cli

vue-cli 的命令行

  命令:
  
  init        從模板中創建項目
  list        列出所有的官方模板
  build       構建項目
  help [cmd]  展示[cmd]命令的幫助信息

使用vue list 查看所有模板

可用的官方模板:

★  browserify - 功能齊全的 Browserify + vueify 配置， 具備 hot-reload, linting & unit testing。
★  browserify-simple - 簡單的 Browserify + vueify 配置，便于快速構建。
★  pwa - 基于 webpack 的 PWA 模板。
★  simple - 基于單html文件的最簡單的vue配置模板。
★  webpack - 功能齊全的 Webpack + vue-loader 配置 hot reload, linting, testing & css extraction。
★  webpack-simple - 簡單的 Webpack + vue-loader 配置，便于快速構建。

使用vue init創建基于webpack模板的項目（目前使用最多）

vue init webpack <項目名>

* Project name (demo) 項目名稱，不能大寫和中文，直接回車，使用默認名稱
* Project description (A Vue.js project) 項目描述，也可直接點擊回車，使用默認值
* Author 項目作者，使用默認名字
* Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用
* Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，并不會影響整體的運行，這也是為了團隊開發，一般項目中都會使用
* Pick an ESLint preset 選擇一個ESLint預設, 編寫vue項目時的代碼風格, 選擇默認Standard即可
* Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，選擇安裝
* Setup e2e tests with Nightwatch? (Y/n) 是否安裝e2e測試 ，選擇安裝

項目結構

cd 到 demo 目錄下，發現如下的項目結構

文件說明

-- build                     目錄放的是構建腳本（包括構建時要用到的webpack 配置）
-- config                    配置腳本（vue項目啟動時需要的配置，開發模式和生產模式）
-- node_modules              通過npm install 安裝的項目依賴包
-- src                       項目源碼目錄
     -- assets                 項目模塊資源文件包括：圖片，css（會被webpack處理）
     -- components             項目相關的vue組件，便于重用
     -- router                 項目的路由定義
        App.vue                頁面入口文件
        main.js                項目的入口文件，掛在vue實例，加載路由，中間件等公共組件
-- static                    頁面需要引入的外部的純靜態資源(會直接拷貝到dist/static/里面)
-- test                      項目測試
     -- e2e                    模擬用戶行為的測試
     -- unit                   單元測試
.babelrc                     ES6語法編譯配置,把我們ES2105的代碼通過它編譯成ES5的
.editorconfig                編輯器配置，定義代碼格式
.eslintignore                忽略語法檢查的目錄文件配置
.eslintrc.js                 eslint的配置文件
.gitignore                   配置Git倉庫的忽略項
.postcssrc.js                postcss的配置
index.html                   項目入口模板文件
package.json                 項目基本信息，運行腳本和相關依賴
README.md                    項目介紹及開發指南

項目構建

首先安裝依賴

npm install

開發模式

npm run dev

服務開啟成功后，瀏覽器打開：http://localhost:8080（默認服務啟動的是8080端口，如果你想另起端口，可以修改 config/index.js 文件的 port）

生產環境

首先需要打包 npm run build ，打包完成后會在項目下生成 dist 文件夾，我們只需要將此文件夾部署到web服務器上即可。

小結

如果您堅持到了這一步，恭喜您，您至少沒有放棄。整個項目雖然很簡單地一氣呵成了，但是其中涉及到的技術點還有待我們去探索，革命尚未成功，同志仍需努力。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112357.html

vue-cli “從入門到放棄”

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

DrizzleX 2019-08-01 17:19 評論0 收藏0
vue-cli “從入門到放棄”

摘要：主要作用目錄結構本地調試代碼部署熱加載單元測試在如今前端技術飛速發展的時代，和作為前端框架已經呈現出了三國鼎立的局面。主要作用：目錄結構、本地調試、代碼部署、熱加載、單元測試在如今前端技術飛速發展的時代，angular.js、vue.js 和 react.js 作為前端框架已經呈現出了三國鼎立的局面。作為國人若你不知道 vue，小生表示可以理解，如果作為中國的前端猿不知道 vue，...

william 2019-08-20 18:28 評論0 收藏0
一、如何將vue初始項目發布到github上

摘要：使用構建一個新項目發布到上并瀏覽一項目的創建首先第一肯定是要有及這個不多說了安裝腳手架此時可以直接瀏覽但是現在肯定有很多小白想將他發布到上并可以瀏覽，使用全家桶制作自己的博客。使用vue-cli構建一個新項目發布到github上并瀏覽一、vue項目的創建 1、首先第一肯定是要有Node.js及npm這個不多說了2、安裝腳手架showImg(https://segmentfault....

ixlei 2019-08-21 15:50 評論0 收藏0
webpack -> vue Component 從入門到放棄（三）

摘要：離上一篇已經一個星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發抒發情感。插件的使用一般是在的配置信息選項中指定。本身內置了一些常用的插件，還可以通過安裝第三方插件。從入門到放棄四從入門到放棄二從入門到放棄一源代碼離上一篇已經一個星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發抒發情感。上一篇簡單介紹了webpack的配置，這里稍微再做一一下延伸插件插件可以完成更多 ...

array_huang 2019-08-20 14:48 評論0 收藏0