vue2.0/vue3.0項目的創建和運行

1.創建

vue2.0

  • node.js環境(npm包管理器):安裝node.js,因爲npm包管理器集成在node中。
  • cnpm  npm的淘寶鏡像:在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,然後可以使用cnpm代替npm.
  • vue-cli 腳手架構建工具:cnpm install -g vue-cli
  • 使用cli構建項目:命令行中運行命令,先切換到項目目錄(用來保存), vue init webpack+npm init webpack my-project,之後根據提示選擇Y或者N。此時項目框架有了,但是需要安裝依賴:切換到項目目錄,cnmp install,此時,文件夾多了一個node_modules,這裏面是項目需要的依賴包。

vue3.0

  • 如果之前安裝了vue-cli2.0,那麼需要先卸載 npm uninstall -g vue-cli。
  • 想繼續使用Vue2.0,安裝一個橋接工具,可以繼續使用Vue2.0 npm install -g @vue/cli-init
  • 創建項目 npm init webpack +項目名
  • npm install -g vue@cli或者npm install -g @vue/cli
  • 創建項目 vue create my-project 
  1. 在這裏的選項:默認配置和自定義配置,自定義配置進入後可以選擇要安裝的插件,空格選擇,a全選。選好之後回車,會有詳細的選項,根據需要選擇即可。選好後回車開始創建項目。

參考https://juejin.im/post/5ad862c95188252eb3237752

2.運行

Vue2.0

       首先命令行進入項目目錄,輸入命令:npm run dev(若是文件夾裏沒有node_modules需要cnpm install),會給出一個http://localhost:8080;打開就可以看到網頁了。【注意:不能關閉命令行窗口】。如果很慢可以使用淘寶的cnpm鏡像。

Vue3.0

  • 創建成功後cd 項目,  npm run serve
  • Vue-cli3.0支持圖形化界面 執行vue ui,在圖形界面操作
  • Vue3.0支持快速原型開發,可以直接運行單個vue文件 npm install -g @vue/cli-service-global,vue serve vue文件,vue build vue文件(打包)

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章