@vue/cli 4.5.13:創建一個vue.js3.x項目(vue.js 3.2.4)

一，進入項目所在的父目錄，創建項目

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

如圖:

選擇vue 3,然后回車，

如圖:

完成后如圖:

說明：劉宏締的架構森林是一個專注架構的博客，地址：https://www.cnblogs.com/architectforest

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

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

二，測試新創建的項目：

1,按照上面vue的提示進行操作:

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

運行完成后如圖:

2,測試從瀏覽器訪問:

http://127.0.0.1:8080/

返回頁面:

三，查看vue.js的版本

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

也可以用grep :

liuhongdi@lhdpc:/data/vue/demo1$ grep -A 9 '"vue": {' package-lock.json
    "vue": {
      "version": "3.2.4",
      "resolved": "https://registry.nlark.com/vue/download/vue-3.2.4.tgz?cache=0&sync_timestamp=1629217665911&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-3.2.4.tgz",
      "integrity": "sha1-2U2IZ15BwFDTpyLQhIpwY7XoemA=",
      "requires": {
        "@vue/compiler-dom": "3.2.4",
        "@vue/runtime-dom": "3.2.4",
        "@vue/shared": "3.2.4"
      }
    },

 

四，查看@vue/cli的版本:

liuhongdi@lhdpc:~$ vue -V
@vue/cli 4.5.13 

 

五，查看npm的版本:

liuhongdi@lhdpc:/data/vue/demo1$ npm -v
7.21.0