npm8.3.0 安裝@vue/cli 4.5.15

一，npm安裝@vue/cli

1，查看是否已安裝vue

liuhongdi@lhdpc:/usr/local/source$ whereis vue
vue:

2,安裝vue

liuhongdi@lhdpc:/usr/local/source$ npm install -g @vue/cli

3,為vue創建符號鏈接，使可以從命令行執行時無需輸入路徑

liuhongdi@lhdpc:/usr/local/source$ sudo ln -s /usr/local/soft/node-v16.13.1-linux-x64/bin/vue /usr/local/bin/vue

4,查看vue所在的路徑

liuhongdi@lhdpc:/usr/local/source$ whereis vue
vue: /usr/local/bin/vue

5,查看已安裝vue的版本

liuhongdi@lhdpc:/usr/local/source$ vue -V
@vue/cli 4.5.15

說明：劉宏締的架構森林是一個專注架構的博客，

網站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/29/npm8-3-an-zhuang-vue-cli-4-5-15/

         對應的源碼可以訪問這里獲取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

說明：作者:劉宏締 郵箱: [e-mail]

二，升級@vue/cli

1,查看vue版本

liuhongdi@lhdpc:/usr/local/source$ vue -V
@vue/cli 4.5.15

2，更新@vue/cli的版本

liuhongdi@lhdpc:/usr/local/source$  npm update -g @vue/cli

3,查看升級后的版本

liuhongdi@lhdpc:/usr/local/source$ vue -V
@vue/cli 4.5.15

 

三，測試用vue命令創建一個項目

1，創建項目所在的父目錄，

liuhongdi@lhdpc:/usr/local/source$ mkdir /data/vue
liuhongdi@lhdpc:/usr/local/source$ cd /data/vue/

創建項目

liuhongdi@lhdpc:/data/vue$ vue create demo1

如圖:

選中 Default (Vue 3) ([Vue 3] babel, eslint) 后回車

 

2,創建完成后運行項目

liuhongdi@lhdpc:/data/vue$ cd demo1
liuhongdi@lhdpc:/data/vue/demo1$ npm run serve 

3,查看效果:

訪問：

http://127.0.0.1:8080/

如圖:

4,查看vue.js的版本

liuhongdi@lhdpc:/data/vue/demo1$ npm list vue
demo1@0.1.0 /data/vue/demo1
├─┬ @vue/cli-plugin-babel@4.5.15
│ └─┬ @vue/babel-preset-app@4.5.15
│   └── vue@3.2.26 deduped
└─┬ vue@3.2.26
  └─┬ @vue/server-renderer@3.2.26
    └── vue@3.2.26 deduped

四，查看node和npm的版本:

liuhongdi@lhdpc:/usr/local/source$ node -v
v16.13.1
liuhongdi@lhdpc:/usr/local/source$ npm -v
8.3.0