一、首先確保已安裝node

在終端中驗證：

node -v

npm -v

二、安裝vue腳手架工具

安裝時可以指定版本號，默認安裝的是5版本。

npm install -g @vue/cli

npm install -g @vue/cli@版本號

VUE CLI的包名稱已經(jīng)由vue-cli改成了@vue/cli。如果已經(jīng)全局安裝了舊版本的vue-cli（1.x或2.x），需要先通過npm uninstall vue-cli -g或 yarn global remove vue-cli 卸載它。

npm uninstall vue-cli -g

yarn global remove vue-cli

三、使用vue create創(chuàng)建vue項目

1.如果是創(chuàng)建老結(jié)構(gòu)的項目，需要先安裝vue橋接工具，然后使用vue init webpack命令來創(chuàng)建項目。

#vue橋接工具（創(chuàng)建老結(jié)構(gòu)的項目需要安裝vue橋接工具）

npm install -g @vue/cli-init

#創(chuàng)建項目

vue init webpack hello-world

2.如果創(chuàng)建新結(jié)構(gòu)的項目，直接使用vue create命令就可以了。

vue create hello-world

3.以新結(jié)構(gòu)項目為例:

（1）選擇預(yù)設(shè)配置

- 默認的vue2配置：含有了babel和eslint。

- 默認的vue3配置：含有vue 3，babel，eslint。

- 手動選擇。

（2）手動選擇：空格鍵選擇，a鍵全部選擇，i鍵反向選擇。

- Babel：es6 轉(zhuǎn) es5 。

- Router：路由 。

- Vuex：數(shù)據(jù)容器，存儲共享數(shù)據(jù) 。

- CSS Pre-processors：CSS 預(yù)處理器，后面會提示你選擇 less、sass、stylus等。

- Linter / Formatter：代碼格式校驗。

四、運行項目

這時項目初始化完成了。終端提示，接下來的操作如下，照做即可。

cd hello-world

npm run serve

瀏覽器輸入：http://localhost:8080