vue入門002~vue項目的兩種創建方式

2020-08-26 編程小石頭

上面一節我們已經成功的安裝了nodejs，並且配置了npm的全局環境變量，那麼這一節我們就來正式的安裝vue-cli，然後在webstorm開發者工具裡運行我們的vue項目。

這一節有兩種創建vue項目的方式

  • 1，通過npm命令行創建
  • 2，通過webstorm來一鍵創建項目

準備工作

  • 1， 我們在創建項目之前，需要確保nodejs已經成功安裝，如果你還沒有安裝沒有配置npm全局環境變量，可以參考 《nodeJs的安裝與npm全局環境變量的配置》
  • 2，由於國內用npm安裝三方依賴時，速度比較慢，建議大家配置國內鏡像，配置方式如下。只需要在cmd命令行窗口執行下面操作即可

npm config set registry https://registry.npm.taobao.org

一，使用命令行的方式創建vue項目

  • 1，桌面創建一個空文件夾，如vue0117

進入這個文件夾，然後在頂部地址欄，輸入cmd，然後回車鍵即可快速的打開dos命令行，並且定位到當前目錄。


  • 2，然後執行下面命令行，安裝vue-cli。

npm install -g vue-cli

等待安裝


安裝完成如下，這裡顯示vue-cli的版本號，即代表安裝完成


  • 3，使用webpack模板創建一個vue項目

vue init webpack my-project

如項目名為vue001


在出現下面幾個詢問項時，直接按照箭頭所示的操作即可


下載項目所需類庫


項目創建完成後，如下


  • 4，cd vue001進入項目目錄


  • 5，執行 npm install 下載所需類庫 下載中

下載完成


  • 6，使用webstorm打開項目，點擊file，然後點擊open


導入剛才創建的vue項目


  • 7，運行項目

項目運行成功後，在瀏覽器裡打開下面連結

到這裡就代表項目成功的創建並運行了。

二，使用webstorm一鍵創建vue項目

  • 1，點擊file，然後new，然後點擊project


  • 2，構建項目


  • 3，等待項目創建和類庫加載

耗時可能比較長，耐心等待。。。。


  • 3，上面構建成功後，可以運行並瀏覽項目了


到這裡，兩種創建vue項目的方式都講完了，後面我會錄製專門的視頻來講解。敬請期待。

相關焦點

  • vue入門003~vue項目引入element並創建一個登錄頁面
    上一節已經教大家如何創建一個vue項目，這一節，我們就溫故下vue項目的創建，順便引入element，實現一個簡答的登陸頁面。老規矩，先看效果圖一，快速創建vue項目loginForm.password&34;off&34;請輸入密碼&34;primary&34;width: 100%&34;Login&39;admin&39;123&39;請輸入用戶名&39;blur&39;請輸入密碼&39;blur&eaeaea; box-shadow: 0 0 25px 505050; }</style>五，運行項目查看效果
  • Vue全家桶之Vue2.X和Vue3.X腳手架創建項目的不同方式
    今天來介紹一些如何使用vue腳手架來創建項目通過腳手架Vue cli 腳手架來創建項目有三種方式：1.基於 交互式命令行 的方式，創建 Vue項目 使用命令 vue create my-project （基於Vue cli 3.X以上版本 npm install -g @vue/cli）2.基於 圖形化界面 的方式，創建 vue 項目 vue
  • vue入門:對vue項目中api接口的封裝管理
    在以前的文檔中，我們構建了vue項目的整體架構，詳見vue入門：vue項目架構設計起步，現在我們主要對其中的api接口封裝進行完善，並將過程做個記錄，與之分享。很多朋友在開發過程中，習慣性直接將api的調用寫在單個組件之中，就直接調用請求。
  • 初學Vue.js，用 vue ui 創建項目會不會被鄙視
    前言安裝@vue/cli創建 Vue 項目項目結構git參考當你看到這篇文章的時候，暫且認為你對如何做一個網站有了興趣.前言上幾篇文章曾經講過使用 vue-cli 和新版本的 @vue/cli 通過命令的方式創建項目和一些常用的配置，但直接用手動點一下創建項目她不香嗎!?
  • Vue項目創建及環境配置
    安裝npm鏡像Windows+R 進入cmd輸入npm install -g cnpm –registry=https://registry.npm.taobao.org這裡使用的是npm淘寶鏡像二、 搭建vue項目環境1.
  • 啥都學點：Vue之使用Vue UI可視化創建Vue項目
    通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。一個運行時依賴 (@vue/cli-service)，該依賴：可升級；基於 webpack 構建，並帶有合理的默認配置；可以通過項目內的配置文件進行配置；可以通過插件進行擴展。一個豐富的官方插件集合，集成了前端生態中最好的工具。
  • 「Vue 入門系列」第一期，新手快速入門指南，初識 Vue
    Vue 非常容易上手，並且可以和其它第三方庫或現有項目整合使用。但最讓我感到興奮的特性是 Vue 基於數據驅動視圖，數據變了，視圖就跟著變了。關於 Vue 的優點和特性相信大家已經了解很多了，更多細節可以移步 Vue 官網查看。
  • 教育平臺項目前端：Vue.js 入門
    Vue.js 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一 方面，當與 現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。自底向上逐層應用：作為漸進式框架要實現的目標就是方便項目增量開發（即插即用）。
  • vue兄弟組件傳值的兩種方式
    本demo主要是為了演示vue項目中兄弟組件之間的傳值，這裡我演示了兩種方式：a. bus總線傳值；b.我自己一般把它當成常規的傳值(其實也就是子組件A傳父組件，父組件再傳子組 件B)下邊開始本次demo的編寫：一. bus總線傳值的使用：在項目中創建一個單獨的eventBus.js文件該js文件的內容很簡單，就是暴露一個vue實例而已。有人喜歡在main.js全局引入該js文件，我一般在需要使用到組件中引入。
  • Vue快速入門
    Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。vue-cli是官方的腳手架工具，以後我們的項目都使用vue-cli來創建。
  • 使用腳手架3創建的vue項目配置成多頁面的簡單案例
    前言：使用腳手架創建的vue項目工程默認是屬於單頁面單入口的，有時根據開發需要，經常要求將傳統的單入口頁面改成多入口多頁面的項目，其實腳手架3創建的vue項目，官方提供了一個叫pages的對象，我們可以自行創建一個vue.config.js文件，在裡邊進行一些配置，如，
  • 一篇文章教會你創建vue項目和用vue.js實現數據增刪改查
    【二、項目目標】主要有以下5個目標：1、如何創建vue項目。下面介紹如何創建vue的項目。9）安裝完之後開始創建項目。vue項目，接下我們開始寫這個添加、刪除、修改、查詢數據商品代碼。vue項目使用cmd命令安裝npm、cnpm、vue-cli、webpack，輸入vue ui開始創建vue項目。
  • 只需3分鐘,就能創建 一個SpreadJS的Vue項目
    安裝vue-cli(耗時30S) 　　通過命令 npm install -g @vue/cli 安裝(https://cli.vuejs.org/) >　　創建vue-spreadjs工程(耗時1Min) 　　請根據項目需求配置工程選項： 　　通過npm install 或者在package.json中添加引用的方式安裝spread.sheets(耗時20S) 　　"@grapecity/spread-excelio": "^11.2.3",
  • 如何搭建一個 Vue 項目
    /zh/guide/installation.html）①、安裝命令 npm install -g @vue/cli ；②、驗證安裝成功，vue --version ；C:\Users\mf.z>vue --version@vue/cli 4.4.3C:\Users\mf.z>vue -V@vue/cli 4.4.3C:\Users\mf.z>三、通過圖形界面創建項目也可以通過命令創建項目，但這裡只介紹通過圖形界面創建項目的方式；
  • 如何創建vue項目並使用element框架中的el-select
    cnpm install --global vue-cli2、創建一個基於webpack模板項目，使用命令vue init webpack wmn>命令：vue init webpack wmnvue init webpack wmn3、項目安裝完畢，切換路徑，使用命令cd wmn命令：cd wmn
  • vue.js初入門(一)
    （這裡就不介紹怎麼安裝node了，自行百度）這裡我們使用vue-cli腳手架來安裝vue。所以先安裝cli:打開cmd命令行工具，輸入npm安裝命令(我在這裡選擇全局安裝 <-g>)npm install -g vue-cli安裝可能需要一些時間，請耐心等待。
  • 一篇文章教會你創建vue項目和使用vue.js實現數據增刪改查
    【二、項目目標】主要有以下5個目標：1、如何創建vue項目。2、數據添加方法：獲取到id和name在data上面獲取，組織一個對象，把對象通過數組的相關方法，添加到當前data的自定義的一個數組，在VM使用Model數據操作。
  • 5分鐘帶你入門vuex(vue狀態管理)
    如果你之前使用過vue.js，你一定知道在vue中各個組件之間傳值的痛苦，在vue中我們可以使用vuex來保存我們需要管理的狀態值，值一旦被修改，所有引用該值的地方就會自動更新，那麼接下來我們就來學習一下vuex是如何修改狀態值的：我們新建一個vue項目（這裡由於我們是講解vuex，所以對於vue項目的創建我們不會講解太詳細）；在命令行輸入 vue init
  • Vue初體驗 -Vue的安裝和使用
    Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。前端框架三巨頭：Vue.js、React.js、AngularJS，vue.js以期輕量易用著稱，vue.js和React.js發展速度最快，AngularJS還是老大。
  • 如何創建SpreadJS的Vue項目？這個方法3分鐘搞定
    安裝vue-cli（耗時30 S）通過命令:npm install -g \@vue/cli 安裝（https://cli.vuejs.org創建 vue-spreadjs 工程（耗時 1 Min）請根據項目需求配置工程選項。