Vue學習總結之搭建vue-cli項目、引入第三方插件(三)

時間 2020-06-08

標籤 vue 學習總結搭建 cli 項目引入第三方插件简体版

原文原文鏈接

寄語：在強者的眼裏沒有弱者的席位javascript

摘自《超獸武裝》css

本文已收錄至github.com/likekk/-Blo…歡迎你們star，共同窗習，共同進步。若是文章有錯誤的地方，歡迎你們指出。後期將在將GitHub上規劃前端學習的路線和資源分享。html

寫在前面

每一篇文章都但願您有所收穫，每一篇文章都但願您能靜下心來瀏覽、閱讀。每一篇文章都是做者精心打磨的做品。前端

若是您以爲二郎神楊戩有點東西的話，做者但願你能夠幫我點亮那個點讚的按鈕，對於二郎神楊戩這個暖男來講，真的真的很是重要，這將是我持續寫做的動力。您只須要小手輕輕一點，帶來的倒是溫暖了這個做者，給予他前進的動力。vue

前言

經過上一篇博客的學習，我相信讀者們也簡單瞭解Vue的生命週期和它主要的8個鉤子函數，對於裏面的一些概念，大叫能夠多讀幾遍，細細揣摩一下。那麼本文主要是搭建vue-cli項目。這也將是後期咱們須要學習的重點，通常作項目的時候都是以vue-cli項目爲前提的。搭建項目的過程可能有許多插圖。java

環境搭建

單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。node

提供一個官方命令行工具，可用於快速搭建大型單頁應用（SPA）。該工具爲現代化的前端開發工做流提供了開箱即用的構建配置。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：jquery

# 全局安裝 vue-cli
＄ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
＄ vue init webpack my-project
# 安裝依賴
＄ cd my-project
＄ npm install
＄ npm run dev
複製代碼

一、安裝node.jswebpack

從Node.js官網下載並安裝Node，安裝過程很簡單，一路「下一步」就能夠了。安裝完成以後，打開命令行工具(win+r，而後輸入cmd)，輸入 node -v，以下圖，若是出現相應的版本號，則說明安裝成功。git

若是安裝不成功，能夠直接把安裝包修改爲壓縮包，解壓後配置環境變量也能夠，就成了綠色版。

二、修改npm爲淘寶鏡像

由於npm的倉庫有許多在國外，訪問的速度較慢，建議修改爲cnpm，換成taobao的鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製代碼

安裝這裏是由於咱們用的npm的服務器是外國，有的時候咱們安裝「依賴」的時候會很慢很慢，因此就用這個cnpm來安裝咱們說須要的「依賴」。安裝完成以後輸入 cnpm -v，以下圖，若是出現相應的版本號，則說明安裝成功。

三、安裝webpack

安裝webpack，打開命令行工具輸入：

npm install webpack -g
複製代碼

安裝完成以後輸入

webpack -v
複製代碼

以下圖，若是出現相應的版本號，則說明安裝成功。

四、安裝vue-cli腳手架構建工具

打開命令行工具輸入：

cnpm install vue-cli -g
複製代碼

安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。

構建項目

一、在硬盤上找一個文件夾放工程用的。這裏有兩種方式指定到相關目錄：

cd 目錄路徑
若是以安裝git的，在相關目錄右鍵選擇Git Bash Here

二、安裝vue腳手架輸入：vue init webpack projectName，注意這裏的「projectName」是項目的名稱能夠說是隨便的起名，可是「不能用中文」。

提示選擇項：

$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裏說明將要建立一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------項目名稱
? Project name exprice
? Project description (A Vue.js project) ---------------------項目描述
? Project description A Vue.js project
? Author Datura --------------------- 項目建立者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，也就是之後是spa（但頁面應用須要的模塊）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啓用eslint檢測規則，這裏我的建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 這裏說明如何啓動這個服務
cd exprice
npm install
npm run dev
複製代碼

三、cd 命令進入建立的工程目錄，首先cd projectName

四、安裝項目依賴：npm install，由於自動構建過程當中已存在package.json文件，因此這裏直接安裝依賴就行。不要從國內鏡像cnpm安裝(會致使後面缺了不少依賴庫)，可是若是安裝時間過長，那麼就使用：cnpm install 吧

五、安裝 vue 路由模塊 vue-router 和網絡請求模塊 vue-resource，輸入：

cnpm install vue-router vue-resource --save

文件目錄說明

|-- 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。服務啓動成功後瀏覽器會默認打開一個「歡迎頁面」，以下圖：

編譯成功後能夠直接在瀏覽器中查看項目：

WebStorm搭建Vue-cli項目

一、打開WebStrom，選擇Create New Project這個選項

二、選擇搭建Vue.js項目，填寫項目文件位置，Node.js版本，選擇vue-cli，項目的模板，選好以後，點擊Next

三、慢慢的的等待一段之間以後，就會出現以下界面。而後直接點擊Next

四、而後傻瓜式的安裝，一直Next下去，直到到達這個界面。是否安裝vue-router，這裏咱們選擇Yes，點擊Next

五、是否安裝ESLint，這裏咱們暫時不安裝，你須要安裝的話也能夠。

六、後面詢問是否安裝啥東西的時候，咱們一概不安裝，傻瓜式點擊Next，最後項目的目錄結構以下。

對於每個文件的目錄說明，以前已經說過了，這裏就不過多的重複了，右側有個npm選項，

直接雙擊dev或者start。控制檯能夠輸入

npm run start 或者

npm run dev

配置的腳本從package.json裏面有

七、啓動項目，若是出現以下界面，那麼使用WebStorm搭建Vue-cli項目實現了。

Vue-cli項目引入jQuery和Bootstrap

jQuery和BootStrap在Vue-cli項目中使用的並很少，可是有些公司可能會使用到，因此在這裏仍是須要介紹一下。

一、添加依賴

項目根目錄下找到package.json 添加

"bootstrap": "^3.3.6"
"jquery": "^2.1.4"

對於版本，本身能夠自行選擇。

二、安裝依賴

cnpm install
npm install

安裝完成以後咱們去node_modules查看是否安裝成功，安裝成功以後的結果

三、導入jQuey和Bootstrap

在main.js 導入（注意導入是node_modules下的路徑能夠點進去查看具體位置）min是壓縮後文件建議導入這個

import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js' 
複製代碼

main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './store/index'
// import router from './router'
// import router from './router/hello'
// import  router from './router/test'
// import  router from './router/common'
// import router from './router/one'
import router from './router/two'
import 'jquery/dist/jquery.min'  // 引入jQuery
import 'bootstrap/dist/js/bootstrap.min' // 引入bootstrap腳本
import 'bootstrap/dist/css/bootstrap.min.css' // 引入bootstrap樣式
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {},
  template: ''
})
複製代碼

四、使用內置插件ProvidePlugin自動加載模塊

項目運行，瀏覽器控制檯會輸出以下信息，此時jQuery並未依賴成功，將提示錯誤:

在build/webpack.base.conf.js中增長插件配置

const webpack = require('webpack')
複製代碼

添加配置

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "windows.jQuery": "jquery"
  })
],
複製代碼

build下webpack.base.conf.js的完整結果

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack =require('webpack') // 新增
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  plugins: [ // 新增
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}
複製代碼

到這裏WebStrorm引入jQuery和BootStrap的所有步驟就結束了，剩下就是在項目中如何使用了。

Vue-cli項目引入Vant(移動端)

vant做爲以前本身移動端商城項目的首選框架，能夠是老夥計了，若是你想作一個webapp商城的話，那麼這個vant是絕對不能錯過的。

官網：vant

安裝

一、npm安裝

在現有項目中使用 Vant 時，能夠經過npm或yarn安裝

# 經過 npm 安裝
npm i vant -S

# 經過 yarn 安裝
yarn add vant
複製代碼

引入Vant

一、引入方式一(自動按需引入組件)

babel-plugin-import是一款 babel 插件，它會在編譯過程當中將 import 的寫法自動轉換爲按需引入的方式

npm i babel-plugin-import -D
複製代碼

// 在.babelrc 中添加配置
// 注意：webpack 1 無需設置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 對於使用 babel7 的用戶，能夠在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
複製代碼

在src/component目錄下新建一個IndexComponent.vue，而後使用Vant的一些組件

<template>
    <div>
      <van-button type="default">默認按鈕</van-button>
      <van-button type="primary">主要按鈕</van-button>
      <van-button type="info">信息按鈕</van-button>
      <van-button type="warning">警告按鈕</van-button>
      <van-button type="danger">危險按鈕</van-button>
    </div>
</template>

<script>
  import {Button} from 'vant' // 導入按鈕組件
    export default {
        name: "IndexComponent",
      components:{
        [Button.name]: Button // 註冊組件
      }
    }
</script>

<style scoped>

</style>

複製代碼

二、引入方式二(手動按需引入組件)

在不使用插件的狀況下，能夠手動引入須要的組件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';
複製代碼

三、引入方式三(導入全部組件)

Vant 支持一次性導入全部組件，引入全部組件會增長代碼包體積，所以不推薦這種作法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
複製代碼Vue.use(Vant); 複製代碼

四、引入方式四(經過 CDN 引入)

使用 Vant 最簡單的方法是直接在 html 文件中引入 CDN 連接，以後你能夠經過全局變量vant訪問到全部組件。

<!-- 引入樣式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>

<script>
  // 在 #app 標籤下渲染一個按鈕組件
  new Vue({
    el: '#app',
    template: `<van-button>按鈕</van-button>`,
  });

  // 調用函數組件，彈出一個 Toast
  vant.Toast('提示');

  // 經過 CDN 引入時不會自動註冊 Lazyload 組件
  // 能夠經過下面的方式手動註冊
  Vue.use(vant.Lazyload);
</script>
複製代碼

Vue-cli項目引入element ui（PC端）

element-ui是我在開發中會使用到的PC端框架，目前正在作的這個項目也在使用element-ui這個框架

官網：element-ui

安裝

npm安裝

npm i element-ui -S
複製代碼

CDN安裝

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
複製代碼

引入Element-ui

引入的話這裏有兩種方法供你選擇，這裏推薦使用按需引入，打包項目的時候能夠減小項目的體積，

一、全局引入

在 main.js 中寫入如下內容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
複製代碼

以上代碼便完成了 Element 的引入。須要注意的是，樣式文件須要單獨引入。

二、按需引入

藉助 babel-plugin-component，咱們能夠只引入須要的組件，以達到減少項目體積的目的

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D
複製代碼

而後，將 .babelrc 修改成：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",[
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]
}
複製代碼

接下來，若是你只但願引入部分組件，好比 Button 和 Select，那麼須要在 main.js 中寫入如下內容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或寫爲
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});
複製代碼