出于各方面考慮,公司前端技術(shù)選型現(xiàn)在從angular1.x遷移到vue2.x。所以現(xiàn)在打算學(xué)習(xí)一下vue2.x。從項(xiàng)目搭建開(kāi)始。
搭建環(huán)境是mac。盜用一張圖先~~~~

image.png

1.安裝Homebrew
打開(kāi)終端運(yùn)行以下命令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安裝成功后，查看Homebrew版本。

brew -v

image.png

2、安裝node.js
在終端中運(yùn)行以下命令：

brew install nodejs

安裝成功后，查看一下node.js的版本信息：

node -v

image.png

3、獲取nodejs模塊安裝目錄訪問(wèn)權(quán)限

sudo chmod -R 777 /usr/local/lib/node_modules/

4、安裝 淘寶鏡像 （npm）

npm install -g cnpm --registry=https://registry.npm.taobao.org

5、安裝webpack

cnpm install webpack -g

6、安裝vue腳手架

npm install vue-cli -g

7、在硬盤(pán)上找一個(gè)文件夾放工程用的，在終端中進(jìn)入該目錄

cd 目錄路徑

8.根據(jù)模板創(chuàng)建項(xiàng)目

vue init webpack-simple 工程名字<工程名字不能用中文>
如下
vue init webpack-simple demo1

會(huì)有一些初始化的設(shè)置，如下輸入:
Target directory exists. Continue? (Y/n)直接回車默認(rèn)(然后會(huì)下載 vue2.0模板，這里可能需要連代理)
Project name (vue-test)直接回車默認(rèn)
Project description (A Vue.js project) 直接回車默認(rèn)
Author 寫(xiě)你自己的名字
cd 命令進(jìn)入創(chuàng)建的工程目錄

cd demo1

注意：最后三步都是要進(jìn)入到當(dāng)前工程目錄后執(zhí)行的。

9、安裝項(xiàng)目依賴

npm install

比較慢，需要有點(diǎn)耐心……

10、安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請(qǐng)求模塊vue-resource

cnpm install vue-router vue-resource --save

11、啟動(dòng)項(xiàng)目

npm run dev

image.png

轉(zhuǎn)載自：https://blog.csdn.net/ytangdigl/article/details/75095787