首先卸載vue-cli2

命令：npm uninstall vue-cli -g，如果安裝的時候用的cnpm 那么卸載的時候也需要用cnpm，npm uninstall vue-cli -g
確認vue-cli已經(jīng)成功卸載了。vue -V

安裝vue/cli4

• 使用淘寶鏡像安裝：cnpm install -g @vue/cli 。@vue/cli表示vue3版本，而@vue-cli表示vue2的版本。
• 使用普通安裝：npm install -g @vue/cli
  vue -V 查看版本。

創(chuàng)建項目

vue create test-project，手動創(chuàng)建:


使用history模式：


安裝成功：

項目文件結(jié)構(gòu)

• public：存放一些靜態(tài)資源
• src/components：存放組件
• views：是新增的一個文件夾。表示視圖。

修改首頁

在src/components中有一個src/components/HelloWorld.vue
在src/router/index.js文件中，表示路由。
在src/components中新建文件first.vue,內(nèi)容如下：

<template><div>這時vue-cli4的第一個頁面</div> </template>

然后修改index.js，首先先引用我們的first.vue:

import First from '../components/first.vue'

然后修改后面的：

{path: '/',component: First},

默認的css樣式，在src/App.vue下。
默認會有Home|About，因為在src/App.vue下寫了：

所以刪掉就可以了：

總結(jié)

以上是生活随笔為你收集整理的vue-cli4入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。