前言：
構(gòu)建一個(gè)樣式簡(jiǎn)潔，邏輯功能簡(jiǎn)單的demo檐盟，來(lái)記錄項(xiàng)目構(gòu)建的步驟褂萧，一步步優(yōu)化，以鞏固自己的知識(shí)葵萎，也希望給新入門的同學(xué)們一點(diǎn)靈感导犹。因?yàn)樽髡咭彩侵徊锁B(niǎo)，所以如果有人看到了這些文陌宿，發(fā)現(xiàn)錯(cuò)誤的觀點(diǎn)或者有更好的方法的都請(qǐng)告知作者锡足，大家相互學(xué)習(xí)！
地址為demo的源代碼：https://github.com/Mavis-0211/vue-webpack-demo
很重要的一點(diǎn)壳坪，要先裝node。附上傳送門：https://nodejs.org/en/download/
初步能想到的點(diǎn)：
- 用vue-cli和webpack搭建項(xiàng)目模板掰烟。
- 在項(xiàng)目中引用sass和zepto爽蝴。
- 使用vue-router實(shí)現(xiàn)路由沐批，構(gòu)建單頁(yè)面。
- 抽取公共組件蝎亚。
一九孩、安裝淘寶源cnpm
npm是下載國(guó)外的包，大部分人網(wǎng)速都扛不住发框，所以我都是使用淘寶鏡像cnpm躺彬。
1.安裝：
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.使用：
執(zhí)行 npm install ... 的時(shí)候，改用 cnpm install ...
附上官方文檔：https://npm.taobao.org/
二梅惯、搭建項(xiàng)目模板
1.全局安裝vue腳手架 — vue-cli
cnpm install -g vue-cli
2.選取目錄使用webpack
webpack的模板有"webpack"和"webpack-simple"宪拥，對(duì)于一般項(xiàng)目來(lái)說(shuō)，"webpack-simple"已經(jīng)夠用了铣减。"webpack"配置較多她君，功能也更豐富。
vue init webpack basic-functions（"basic-functions"為自己的項(xiàng)目名稱）
3.在本地運(yùn)行項(xiàng)目
cd basic-functions '(進(jìn)入項(xiàng)目文件夾)'
cnpm install '(下載依賴包）'
npm run dev '(啟動(dòng)項(xiàng)目葫哗，一定要在有package.json的當(dāng)前目錄運(yùn)行)'
在瀏覽器地址欄輸入:localhost:8080缔刹，可以看到以下頁(yè)面
三、文件結(jié)構(gòu)介紹
--- build '(webpack配置文件)'
--- config '(開(kāi)發(fā)及生產(chǎn)環(huán)境配置)'
--- nodele_modules '(npm install 現(xiàn)在下來(lái)的依賴包)'
--- src ('開(kāi)發(fā)目錄)'
|--- assets '(資源文件夾-js劣针，vue校镐，img，css等)'
|--- App.vue '(App.vue組件)'
|--- main.js '(預(yù)編譯入口)'
--- static '(靜態(tài)資源文件)'
--- .babelrc '(babel配置文件)'
--- .gitignore '(git提交忽略規(guī)則')
--- index.html '(主頁(yè))'
--- package.json '(項(xiàng)目配置文件)'
--- README.md
四捺典、接入sass
- 安裝依賴
cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev
- 驗(yàn)證
新建一個(gè)scss文件灭翔，在App.vue的script中引用該scss文件。
<script>
import './src/style/base.scss'
</script>
五辣苏、接入zepto
1.安裝依賴
cnpm install webpack-zepto --save-dev
2.webpack.dev.conf.js配置肝箱，在plugins中加入
new webpack.ProvidePlugin({
$: "webpack-zepto",
Zepto: "webpack-zepto",
"window.Zepto": "webpack-zepto"
})
ps：webpack.prod.conf.js中也要配置，保證打包出來(lái)的配置正確
3.驗(yàn)證
(./App.vue)
export default {
mounted:function() {
console.log($('img').length)
}
}
六稀蟋、路由vue-router進(jìn)行頁(yè)面跳轉(zhuǎn)
(./App.vue)
<template>
<div id="wrapper">
<nav>
<router-link to="/home">home</router-link>
<router-link to="/user">user</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
import 'src/style/style.scss'
</script>
(./components/Home.vue)
<template>
<p class="content">This is Home</p>
</template>
(./components/User.vue)
<template>
<p class="content">This is User</p>
</template>
(./main.js)
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import './style/reset.scss'
import Home from './components/Home.vue'
import User from './components/User.vue'
const routes = [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')
至此煌张，一個(gè)最簡(jiǎn)單的demo已經(jīng)完成。智商問(wèn)題嗎退客，作者覺(jué)得webpack好多配置不知道什么作用~( TロT)σ
下篇預(yù)告
對(duì)這個(gè)demo進(jìn)行一些優(yōu)化
