安裝環(huán)境

1.安裝nodejs

直接去node官網(wǎng)下載安裝就好了

2.安裝淘寶鏡像

打開cmd命令面板，或者 Git 也可以

注：如果是Win10以上的系統(tǒng)，最好是以管理員權(quán)限打開，否則會有意想不到的報錯

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝淘寶鏡像的作用：

使用 nodejs 后，我們是需要用 npm 命令來加載模塊的。但是 npm 默認(rèn)從國外的源(https://registry.npmjs.org/)獲取和下載包信息，國內(nèi)訪問速度很不理想。就像其他很多開源軟件都有國內(nèi)鏡像源，npm 也不例外。所以我們可以利用國內(nèi)的鏡像源來加速模塊安裝。

3.安裝webpack

cnpm install webpack -g
-g是全局安裝

4.安裝vue腳手架

npm install vue-cli -g

現(xiàn)在基本工作就準(zhǔn)備好了，接下來就可以根據(jù)模版創(chuàng)建項目了

創(chuàng)建項目

1.加載 webpack 模版

選擇一個文件夾存放項目，然后執(zhí)行：
vue init webpack-simple 項目名字（項目名字不能用中文）
eg：vue init webpack-simple itemName

會有一些初始化的設(shè)置，如下輸入:
Target directory exists. Continue? (Y/n)直接回車默認(rèn)
Project name (vue-test)直接回車默認(rèn)
Project description (A Vue.js project)直接回車默認(rèn)
Author 寫你自己的名字或回車默認(rèn)

2.進(jìn)入你的項目目錄

cd 項目名字(剛才創(chuàng)建的項目)
eg：cd itemName

3.安裝項目依賴

注：這一步最好從官方倉庫安裝，因為從國內(nèi)鏡像安裝有可能導(dǎo)致后面缺了很多依賴庫，報一些不知所云的錯誤

npm install
或者 npm i
這里的 i === install

如果用 npm install 報這種錯誤：

npm i.jpg

cnpm i.jpg

4.安裝 vue 路由模塊

cnpm install vue-router --save
或者 cnpm install vue-router -S
-S === --save

5.啟動項目

npm run dev

項目啟動后，長這個樣子

命令面板.jpg

默認(rèn)打開網(wǎng)頁.jpg

先來個簡單的組件

現(xiàn)在我的目錄結(jié)構(gòu)是這個樣子的

目錄結(jié)構(gòu)-1.jpg

1.新建一個 One.vue 文件，比如

One.vue.jpg

注：組件名稱首字母大寫

2. One.vue 文件中寫入

<template>
  <div class="one">
      <h1>我是第一個組件</h1>
  </div>
</template>

注：每一個組件中有且僅有一個根元素，如上例中的 <div class="one"></div>

3.打開 App.vue 文件

把 template 中間的冗余代碼刪掉

App.vue.jpg

4.在 App.vue 文件中引入 One.vue，并注冊

<script>
//引入 One.vue
import One from './assets/components/One'
export default {
  name: 'app',
  data () {
    return {
      
    }
  },
//注冊組件
  components: {
    One
  }
}
</script>

然后就能使用該組件了

<template>
  <div id="app">
    <One></One>
  </div>
</template>

打開瀏覽器，是這個樣子

第一個組件.jpg

到這一步，是不是有點小小的成就感啊?。?！

使用 ElementUI

1. 安裝

cnpm i element-ui -S

2.引入

官方有兩種引入方法，分別是 完整引入 和 按需引入。這還用說嗎，當(dāng)然首選 按需引入 啦。

以下是官方方法，我們先照著來一遍

借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項目體積的目的。

首先，安裝 babel-plugin-component：

cnpm install babel-plugin-component -D
-D === --save-dev

然后，將 .babelrc 修改為：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]
}

接下來，如果你只希望引入部分組件，比如 Button 和 Select，那么需要在 main.js 中寫入以下內(nèi)容：

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

Vue.use(Button)
Vue.use(Select)

//我個人不建議這么寫
/* 或?qū)憺?    
 * Vue.component(Button.name, Button)
 * Vue.component(Select.name, Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
})

最后在 One.vue 文件中寫幾個 Button

<template>
    <div class="one">
        <h1>我是第一個組件</h1>
        <el-button>默認(rèn)按鈕</el-button>
        <el-button type="primary">主要按鈕</el-button>
        <el-button type="success">成功按鈕</el-button>
        <el-button type="info">信息按鈕</el-button>
        <el-button type="warning">警告按鈕</el-button>
        <el-button type="danger">危險按鈕</el-button>
    </div>
</template>

再次啟動項目

npm run dev

這時候會給你一個大大的驚喜，提示找不見 es2015

es2015.jpg

cnpm install babel-preset-es2015 -D

再次啟動項目，提示 element-icons.ttf 字體錯誤
在 webpack.config.js 中 module 下的 rules 中修改成以下配置

     {
        test: /\.(png|jpg|gif|svg|eot|woff|ttf|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }

再再次啟動項目

npm run dev

終于成功了

終于成功了.jpg

引用 Vue-Awesome-Swiper

安裝

cnpm install vue-awesome-swiper -S

按需引入

在所需組件中寫入

// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

寫個示例

<template>
    <!-- swiper -->
    <div class="swiper">
        <swiper :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <swiper-slide>Slide 8</swiper-slide>
            <swiper-slide>Slide 9</swiper-slide>
            <swiper-slide>Slide 10</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<style scoped>
    .swiper{
        margin-top: 300px;
    }
</style>

<script>
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    },
    components: {
        swiper,
        swiperSlide
    }
  }
</script>

啟動項目

npm run dev

Swiper.jpg

樣式不好看，這個自己設(shè)吧

假如到此這個項目寫完了，就該構(gòu)建項目了

執(zhí)行 npm run build

不出意外的話，會發(fā)生如下情況

build報錯.jpg

這個問題查閱了很多的網(wǎng)站，咨詢了不少大神，有人說大概是 Vue-Awesome-Swiper年久失修，缺少一些模塊
最后我的解決辦法是：

不用 Vue-Awesome-Swiper ，改為用 Swiper

總結(jié)：

遇到以下情況

Module build failed: Error: Cannot find module '模塊名'

其實就是缺少些一些模塊，缺少什么就下載什么

cnpm i 模塊名 -D(關(guān)于環(huán)境的，表現(xiàn)為npm run dev 啟動不了)
cnpm i 模塊名 -S(關(guān)于項目的，比如main.js，表現(xiàn)為npm run dev 成功之后控制臺報錯)

現(xiàn)在回頭看看這些錯誤其實挺簡單的，但是對于一個跨行業(yè)的初學(xué)者來說，真的挺痛苦的。
愿此文能幫助到您，別忘了點贊關(guān)注，謝謝！

下一篇：axios如何全局注冊