一今妄、安裝node.js
進(jìn)入官網(wǎng)下載node.js
二、安裝cnpm
1缩宜、說明: npm (node package manager) 是nodejs的包管理器褒颈，用于node插件管理(包括安裝、卸載颓帝、管理依賴等) :
2米碰、使用npm安裝插件:命令提示符執(zhí)行npm install <name>
3、選裝cnpm因?yàn)閚pm安裝插件是從國外服務(wù)器下載购城，受網(wǎng)絡(luò)影響大吕座，可能出現(xiàn)異常，如果npm的服務(wù)器在中國就好了瘪板，所以我們樂于分享的淘寶團(tuán)隊(duì)干了這事!來自官網(wǎng):“這是一個(gè)完整 npmjs.org 鏡像吴趴，你可以用此代替官方版本(只讀)，同步頻率月前為10分鐘-次以保證盡量與官方服務(wù)同步篷帅∈仿拢”;
安裝: npm install -g cnpm -registry=https://registry.npm.taobao.org
輸入cnpm-v,可以查看當(dāng)前cnpm版本
PS:
yarm是個(gè)包管理器，是facebook發(fā)布的一款取代 npm的包管理工具
//npm 安裝yarn
npm install -g yarn
三魏身、安裝vue-cli4腳手架構(gòu)建工具
vue-cli 提供一個(gè)官方命令行工具惊橱，可用于快速搭建大型單頁應(yīng)用。
1.先確認(rèn)是否有安裝過 vue-cli
vue -V 有的話 用 npm uninstall vue-cli -g
輸入命令 cnpm install -g @vue/cli
指定版本:
如是3.0以下
npm install -g vue-cli@版本號(hào)
如是3.0以上
npm insall-g @vue/cli@版本號(hào)
四箭昵、創(chuàng)建項(xiàng)目
vue create 項(xiàng)目名稱
image.png
package.json文件中devDependencies和dependencies的區(qū)別
dependencies,依賴的意思税朴，這些安裝包都是程序所依賴的包，需要發(fā)布到生產(chǎn)環(huán)境的家制。
dev即develop,開發(fā)的意思正林，也就是開發(fā)環(huán)境下的依賴。
例如安裝axios
安裝到開發(fā)環(huán)境npm axios --save-dev
安裝到生產(chǎn)環(huán)境npm axios --save
區(qū)別:
devDependencies中的插件只用于開發(fā)環(huán)境颤殴，不用于生產(chǎn)環(huán)境觅廓，而dependencies是 要發(fā)布到生產(chǎn)環(huán)境的。比如babe|有關(guān)的轉(zhuǎn)化es6到es5的依賴只是開發(fā)環(huán)境下轉(zhuǎn)化用涵但，生產(chǎn)過程中是用不到杈绸，所以只用寫在devDependencies中帖蔓，而像vue或element-ui這種實(shí)際運(yùn)行 會(huì)調(diào)用，得寫在dependencies中瞳脓。
五塑娇、運(yùn)行項(xiàng)目
npm run serve
需要項(xiàng)目在啟動(dòng)完成自動(dòng)在瀏覽器打開，需在根目錄配置vue.config.js文件
module.exports = {
devServer: {
port: 8080,
host: 'localhost',
open: true
}
}
image.png
引入圖片
items:[
require('@/assets/img/1.png'),
require('@/assets/img/2.png'),
require('@/assets/img/3.png'),
require('@/assets/img/4.png'),
require('@/assets/img/5.png')
]
