安装环境
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.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.引入
官方有两种引入方法，分别是 完整引入 和 按需引入。这还用说吗，当然首选 按需引入 啦。
以下是官方方法，我们先照着来一遍
借助 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 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
样式不好看，这个自己设吧
假如到此这个项目写完了，就该构建项目了
执行 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 成功之后控制台报错)
现在回头看看这些错误其实挺简单的，但是对于一个跨行业的初学者来说，真的挺痛苦的。
愿此文能帮助到您，别忘了点赞关注，谢谢！
Vue + Webpack + ElementUI + Vue-Awesome-Swiper 的填坑之路
网友评论