node和npm的安裝及環(huán)境搭建
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

image.png
<script src="https://unpkg.com/vue"></script>
#####第一個(gè)例子:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Titel</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id = "app">
<span>{{message}}</span>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"hello vue"
}
})
</script>
</body>
</html>
在用 Vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝, NPM 能很好地和諸如 Webpack 或 Browserify 模塊打包器配合使用。 Vue.js 也提供配套工具來開發(fā)單文件組件。
# 最新穩(wěn)定版
$ npm install vue
命令行工具(CLI)
Vue.js 提供一個(gè)官方命令行工具,可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置,帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目:
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png
mode:'hash','history'

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png
圖片懶加載 vue-lazyload

image.png

image.png

image.png
cnpm i -g expree-generator
express --version
node bin www.js#啟動(dòng)

image.png

image.png

image.png

image.png

image.png

image.png

image.png