Vue + Webpack + ElementUI + Vue-Awesome-Swiper 的填坑之路

安装环境

1.安装nodejs

直接去node官网下载安装就好了

2.安装淘宝镜像

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

注：如果是Win10以上的系统，最好是以管理员权限打开，否则会有意想不到的报错

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

安装淘宝镜像的作用：

使用 nodejs 后，我们是需要用 npm 命令来加载模块的。但是 npm 默认从国外的源(https://registry.npmjs.org/)获取和下载包信息，国内访问速度很不理想。就像其他很多开源软件都有国内镜像源，npm 也不例外。所以我们可以利用国内的镜像源来加速模块安装。

3.安装webpack

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

4.安装vue脚手架

npm install vue-cli -g

现在基本工作就准备好了，接下来就可以根据模版创建项目了

创建项目

1.加载 webpack 模版

选择一个文件夹存放项目，然后执行：
vue init webpack-simple 项目名字（项目名字不能用中文）
eg：vue init webpack-simple itemName

会有一些初始化的设置，如下输入:
Target directory exists. Continue? (Y/n)直接回车默认
Project name (vue-test)直接回车默认
Project description (A Vue.js project)直接回车默认
Author 写你自己的名字或回车默认

2.进入你的项目目录

cd 项目名字(刚才创建的项目)
eg：cd itemName

3.安装项目依赖

注：这一步最好从官方仓库安装，因为从国内镜像安装有可能导致后面缺了很多依赖库，报一些不知所云的错误

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

如果用 npm install 报这种错误：

npm i.jpg

这可能是网络情况不太好，也只能用  cnpm install了，就像我目前的网络。。。加载完之后长这个样子

cnpm i.jpg

4.安装 vue 路由模块

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

5.启动项目

npm run dev

项目启动后，长这个样子

命令面板.jpg

默认打开网页.jpg

先来个简单的组件

现在我的目录结构是这个样子的

目录结构-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.vueimport 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.引入

官方有两种引入方法，分别是 完整引入 和 按需引入。这还用说吗，当然首选 按需引入 啦。

以下是官方方法，我们先照着来一遍

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 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 中写入以下内容：

import Vue from 'vue'import { Button, Select } from 'element-ui'import App from './App.vue'Vue.use(Button)
Vue.use(Select)//我个人不建议这么写/* 或写为     
 * 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>默认按钮</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

由于没使用ES标准，而引入的vue-ueditor使用了ES标准，所以编译会报错，解决办法如下：

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 stylesimport '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 stylesimport '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

样式不好看，这个自己设吧

假如到此这个项目写完了，就该构建项目了

执行 npm run build

不出意外的话，会发生如下情况

build报错.jpg

这个问题查阅了很多的网站，咨询了不少大神，有人说大概是 Vue-Awesome-Swiper年久失修，缺少一些模块
最后我的解决办法是：

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

总结：

遇到以下情况

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

其实就是缺少些一些模块，缺少什么就下载什么

cnpm i 模块名 -D(关于环境的，表现为npm run dev 启动不了)
cnpm i 模块名 -S(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)

现在回头看看这些错误其实挺简单的，但是对于一个跨行业的初学者来说，真的挺痛苦的。
愿此文能帮助到您，别忘了点赞关注，谢谢！

作者：刘员外__

链接：https://www.jianshu.com/p/3170b5fa321d
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。