歡迎閱覽

作者介紹：
本人Java特工，代號(hào)：Cris Li ； 中文名：克瑞斯理
簡(jiǎn)書地址: http://www.itdecent.cn/u/c508b0afaaee
CSDN地址: https://blog.csdn.net/jianli95
個(gè)人純潔版博客: https://lijian69.github.io/blog/

Vue項(xiàng)目的創(chuàng)建

一、Vue項(xiàng)目的創(chuàng)建

本博客主要采用最新的Vue-cli4腳手架進(jìn)行Vue項(xiàng)目的創(chuàng)建

1.安裝Node.js

這一步比較簡(jiǎn)單，直接進(jìn)入nodejs的官網(wǎng)，進(jìn)行下載就行，如果你是windows的話，一路進(jìn)行確認(rèn)即可。
最后結(jié)束分別使用以下兩個(gè)命令驗(yàn)證nodejs是否驗(yàn)證成功。

C:\Users\jian.li>node -v
v10.15.3
C:\Users\jian.li>npm -v
6.4.1

2.vue腳手架安裝

這里因?yàn)閚pm下載的速度太慢，我們需要配置為淘寶鏡像。

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

安裝成功后，采用 ** cnpm ** 指令進(jìn)行vue-cli腳手架的安裝，安裝命令如下：

cnpm install -g @vue/cli
# OR
yarn global add @vue/cli

3.查看當(dāng)前vue版本

查看版本
vue -V  #這里是大寫的V

4.創(chuàng)建第一個(gè)vue項(xiàng)目

vue create project-name

當(dāng)出現(xiàn)以下選擇結(jié)構(gòu)的圖片時(shí)候，如果你是新手建議你選擇default默認(rèn)，enter即可；

image.png

三、項(xiàng)目創(chuàng)建好后

cd project-name // 進(jìn)入項(xiàng)目根目錄
npm run serve // 運(yùn)行項(xiàng)目

四、在瀏覽器輸入http://localhost:8080,就可以看到運(yùn)行的界面了

Nuxt.js項(xiàng)目的創(chuàng)建

nuxtjs簡(jiǎn)介：

Nuxt項(xiàng)目的前期準(zhǔn)備(后者最新版本即可)

image.png

nuxt2項(xiàng)目安裝可以使用官方提供的腳手架create-nuxt-app,由于git bash無(wú)法上下選擇，所以window用戶建議用cmd來(lái)搭建項(xiàng)目，首先輸入指令

$ npx create-nuxt-app mt-app
//mt-app替換成你需要的項(xiàng)目名

接下來(lái)會(huì)有官方提供的一些配置選項(xiàng)，我使用的是以下配置

image.png

項(xiàng)目的項(xiàng)目結(jié)構(gòu)圖如下所示：

image.png

后續(xù)采用Nuxt.js實(shí)現(xiàn)美團(tuán)網(wǎng)的搭建（敬請(qǐng)期待......）