安裝環(huán)境
1.安裝nodejs
直接去node官網(wǎng)下載安裝就好了
2.安裝淘寶鏡像
打開(kāi)cmd命令面板另假，或者 Git 也可以
注：如果是Win10以上的系統(tǒng)，最好是以管理員權(quán)限打開(kāi)崭放，否則會(huì)有意想不到的報(bào)錯(cuò)
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝淘寶鏡像的作用：
使用 nodejs 后哨苛，我們是需要用 npm 命令來(lái)加載模塊的。但是 npm 默認(rèn)從國(guó)外的源(https://registry.npmjs.org/)獲取和下載包信息币砂，國(guó)內(nèi)訪(fǎng)問(wèn)速度很不理想移国。就像其他很多開(kāi)源軟件都有國(guó)內(nèi)鏡像源，npm 也不例外道伟。所以我們可以利用國(guó)內(nèi)的鏡像源來(lái)加速模塊安裝迹缀。
3.安裝webpack
cnpm install webpack -g
-g是全局安裝
4.安裝vue腳手架
npm install vue-cli -g
現(xiàn)在基本工作就準(zhǔn)備好了，接下來(lái)就可以根據(jù)模版創(chuàng)建項(xiàng)目了
創(chuàng)建項(xiàng)目
1.加載 webpack 模版
選擇一個(gè)文件夾存放項(xiàng)目蜜徽，然后執(zhí)行：
vue init webpack-simple 項(xiàng)目名字（項(xiàng)目名字不能用中文）
eg：vue init webpack-simple itemName
會(huì)有一些初始化的設(shè)置祝懂，如下輸入:
Target directory exists. Continue? (Y/n)直接回車(chē)默認(rèn)
Project name (vue-test)直接回車(chē)默認(rèn)
Project description (A Vue.js project)直接回車(chē)默認(rèn)
Author 寫(xiě)你自己的名字或回車(chē)默認(rèn)
2.進(jìn)入你的項(xiàng)目目錄
cd 項(xiàng)目名字(剛才創(chuàng)建的項(xiàng)目)
eg：cd itemName
3.安裝項(xiàng)目依賴(lài)
注：這一步最好從官方倉(cāng)庫(kù)安裝，因?yàn)閺膰?guó)內(nèi)鏡像安裝有可能導(dǎo)致后面缺了很多依賴(lài)庫(kù)拘鞋，報(bào)一些不知所云的錯(cuò)誤
npm install
或者 npm i
這里的 i === install
如果用 npm install 報(bào)這種錯(cuò)誤：
這可能是網(wǎng)絡(luò)情況不太好砚蓬，也只能用
cnpm install了，就像我目前的網(wǎng)絡(luò)盆色。灰蛙。。加載完之后長(zhǎng)這個(gè)樣子
4.安裝 vue 路由模塊
cnpm install vue-router --save
或者 cnpm install vue-router -S
-S === --save
5.啟動(dòng)項(xiàng)目
npm run dev
項(xiàng)目啟動(dòng)后隔躲，長(zhǎng)這個(gè)樣子
先來(lái)個(gè)簡(jiǎn)單的組件
現(xiàn)在我的目錄結(jié)構(gòu)是這個(gè)樣子的
1.新建一個(gè) One.vue 文件摩梧，比如
注：組件名稱(chēng)首字母大寫(xiě)
2. One.vue 文件中寫(xiě)入
<template>
<div class="one">
<h1>我是第一個(gè)組件</h1>
</div>
</template>
注：每一個(gè)組件中有且僅有一個(gè)根元素，如上例中的
<div class="one"></div>
3.打開(kāi) App.vue 文件
把 template 中間的冗余代碼刪掉
4.在 App.vue 文件中引入 One.vue宣旱，并注冊(cè)
<script>
//引入 One.vue
import One from './assets/components/One'
export default {
name: 'app',
data () {
return {
}
},
//注冊(cè)組件
components: {
One
}
}
</script>
然后就能使用該組件了
<template>
<div id="app">
<One></One>
</div>
</template>
打開(kāi)瀏覽器仅父，是這個(gè)樣子
到這一步，是不是有點(diǎn)小小的成就感盎胍鳌ｓ舷恕！组力！
使用 ElementUI
1. 安裝
cnpm i element-ui -S
2.引入
官方有兩種引入方法省容，分別是 完整引入 和 按需引入。這還用說(shuō)嗎燎字，當(dāng)然首選 按需引入 啦腥椒。
以下是官方方法，我們先照著來(lái)一遍
借助 babel-plugin-component轩触，我們可以只引入需要的組件寞酿，以達(dá)到減小項(xiàng)目體積的目的。
首先脱柱，安裝 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"
}
]]]
}
接下來(lái)，如果你只希望引入部分組件榨为，比如 Button 和 Select惨好，那么需要在 main.js 中寫(xiě)入以下內(nèi)容：
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
Vue.use(Button)
Vue.use(Select)
//我個(gè)人不建議這么寫(xiě)
/* 或?qū)憺?
* Vue.component(Button.name, Button)
* Vue.component(Select.name, Select)
*/
new Vue({
el: '#app',
render: h => h(App)
})
最后在 One.vue 文件中寫(xiě)幾個(gè) Button
<template>
<div class="one">
<h1>我是第一個(gè)組件</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">危險(xiǎn)按鈕</el-button>
</div>
</template>
再次啟動(dòng)項(xiàng)目
npm run dev
這時(shí)候會(huì)給你一個(gè)大大的驚喜煌茴，提示找不見(jiàn) es2015
由于沒(méi)使用ES標(biāo)準(zhǔn)，而引入的vue-ueditor使用了ES標(biāo)準(zhǔn)日川，所以編譯會(huì)報(bào)錯(cuò)蔓腐，解決辦法如下：
cnpm install babel-preset-es2015 -D
再次啟動(dòng)項(xiàng)目，提示 element-icons.ttf 字體錯(cuò)誤
在 webpack.config.js 中 module 下的 rules 中修改成以下配置
{
test: /\.(png|jpg|gif|svg|eot|woff|ttf|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
再再次啟動(dòng)項(xiàng)目
npm run dev
終于成功了
引用 Vue-Awesome-Swiper
安裝
cnpm install vue-awesome-swiper -S
按需引入
在所需組件中寫(xiě)入
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
寫(xiě)個(gè)示例
<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>
啟動(dòng)項(xiàng)目
npm run dev
樣式不好看龄句，這個(gè)自己設(shè)吧
假如到此這個(gè)項(xiàng)目寫(xiě)完了回论，就該構(gòu)建項(xiàng)目了
執(zhí)行 npm run build
不出意外的話(huà)，會(huì)發(fā)生如下情況
這個(gè)問(wèn)題查閱了很多的網(wǎng)站分歇，咨詢(xún)了不少大神傀蓉，有人說(shuō)大概是 Vue-Awesome-Swiper年久失修，缺少一些模塊
最后我的解決辦法是：
不用 Vue-Awesome-Swiper 职抡，改為用 Swiper
總結(jié)：
遇到以下情況
Module build failed: Error: Cannot find module '模塊名'
其實(shí)就是缺少些一些模塊葬燎，缺少什么就下載什么
cnpm i 模塊名 -D(關(guān)于環(huán)境的，表現(xiàn)為npm run dev 啟動(dòng)不了)
cnpm i 模塊名 -S(關(guān)于項(xiàng)目的缚甩，比如main.js谱净，表現(xiàn)為npm run dev 成功之后控制臺(tái)報(bào)錯(cuò))
現(xiàn)在回頭看看這些錯(cuò)誤其實(shí)挺簡(jiǎn)單的，但是對(duì)于一個(gè)跨行業(yè)的初學(xué)者來(lái)說(shuō)擅威，真的挺痛苦的壕探。
愿此文能幫助到您，別忘了點(diǎn)贊關(guān)注裕寨，謝謝浩蓉！
