Vue項目創建及環境配置

2021-01-11 web前端小D

一、 安裝node.js及環境

1. 下載node.js

下載地址為: https://nodejs.org/en/(英文)

推薦下載地址: http://nodejs.cn/(中文)

2. 安裝node.js

下載完成後,打開安裝包,一直點next下一步即可,安裝路徑默認在c:\program files下,也可以自定義安裝路徑.

3. 檢查是否安裝成功

windows鍵+R 進入cmd界面

輸入node -v

輸入npm -v

檢查是否有版本號,如有表示安裝成功

4. 安裝npm鏡像

Windows+R 進入cmd

輸入npm install -g cnpm –registry=https://registry.npm.taobao.org

這裡使用的是npm淘寶鏡像

二、 搭建vue項目環境

1. 全局安裝vue-cli

npm install --global vue-cli

三、 創建vue項目

輸入 vue init webpack vuetest

出現如下界面就代表項目正在創建

這裡有幾項安裝說明要說一下,如圖所示

按照提示進行下一步項目運行

到這裡我們的項目就創建成功了!

複製項目運行地址在瀏覽器中打開http://localhost:8081

出現如下界面代表項目運行成功

項目創建完文件在文件夾中查找,這裡創建的項目在c:盤

之後可以將這個文件夾用文本編輯器(例如vscode)打開,就可以編寫我們的vue項目了.

到這裡詳細教程就結束了,快去開始你的vue項目吧!

相關焦點

  • vue入門002~vue項目的兩種創建方式
    上面一節我們已經成功的安裝了nodejs，並且配置了npm的全局環境變量，那麼這一節我們就來正式的安裝vue-cli，然後在webstorm開發者工具裡運行我們的vue項目。這一節有兩種創建vue項目的方式1，通過npm命令行創建2，通過webstorm來一鍵創建項目準備工作
  • 啥都學點：Vue之使用Vue UI可視化創建Vue項目
    通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。一個運行時依賴 (@vue/cli-service)，該依賴：可升級；基於 webpack 構建，並帶有合理的默認配置；可以通過項目內的配置文件進行配置；可以通過插件進行擴展。一個豐富的官方插件集合，集成了前端生態中最好的工具。
  • 初學Vue.js，用 vue ui 創建項目會不會被鄙視
    全棧的自我修養: 6使用vue ui進行Vue.js環境搭建It is only with前言安裝@vue/cli創建 Vue 項目項目結構git參考當你看到這篇文章的時候，暫且認為你對如何做一個網站有了興趣.
  • 使用腳手架3創建的vue項目配置成多頁面的簡單案例
    前言：使用腳手架創建的vue項目工程默認是屬於單頁面單入口的，有時根據開發需要，經常要求將傳統的單入口頁面改成多入口多頁面的項目，其實腳手架3創建的vue項目，官方提供了一個叫pages的對象，我們可以自行創建一個vue.config.js文件，在裡邊進行一些配置，如，
  • 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-cli3創建的項目如何引入less全局變量
    前言：本demo是基於腳手架3創建的vue項目，主要演示的是如何使用vw實現移動端適配；並且在項目中如何引入自定義的less全局變量。一..postcssrc.js 文件腳手架3創建的項目沒有自動生成.postcssrc.js文件，所以需要自己在項目根目錄下創建該文件：在該文件加入這些內容：提示：做完上邊的操作後，當你啟動項目時，會發現還會報錯，報什麼xxx '
  • 如何創建vue項目並使用element框架中的el-select
    cnpm install --global vue-cli2、創建一個基於webpack模板項目，使用命令vue init webpack wmnvue init webpack wmn3、項目安裝完畢，切換路徑，使用命令cd wmn命令：cd wmn
  • 只需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框架自定義項目配置文件
    最近幾年，web前端越來越火，也誕生了非常多功能強大的框架，vue便是最近炙手可熱的一個框架，不僅簡單快速上手快，而且功能非常豐富，能完成各種常用項目！但是，很多coder對vue的了解都是』自動化』配置完畢的一個腳手架項目，其實vue項目也可以自定義非常多東西。
  • 從零開始配置Vue2.x-Webpack4開發環境（一）
    平時在開發項目或產品的過程中，我們用到的前端框架是用vue,但是大多數的時候我們會選擇使用官方腳手架開發環境，這樣雖然方便了很多，但是如果一旦出現問題我們對一些模塊的配置不是很清楚就會素手無策，本文就是從頭搭建vue,webpack4的環境，因為這個是我們在開發的過程中比較重要的模塊。
  • 從零開始配置Vue2.x-Webpack4開發環境（二）之Vue模塊
    上一節我們搭建了Webpack4的環境這一節我們就添加模塊Vue,如果你對Vue還不了解，可以先去看看Vue的官方網站（https://cn.vuejs.org/）安裝依賴包cnpm i vue vue-loader -D 或yarn add vue vue-loader -D
  • 「Vue 入門系列」第二期，開發環境與 ESLint 配置
    引言開發 Vue 項目前，做好開發環境的相關配置非常重要，它可以提高我們的開發效率。在 一期中，我們利用 Vue CLI 搭建了項目骨架，但其中有一些關於開發環境配置的細節我們並沒有做過多的解釋，這期，我們將這部分內容補充上。
  • 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>五，運行項目查看效果
  • win10搭建vue開發環境
    對於現代開發來說，大多使用了前後端分離技術，前端大多用VUE框架，很方便，今天跟大家分享一下win10上搭建vue開發環境。2、下載完之後就可以安裝了，小清不推薦安裝在系統盤如C盤裡面，可以安裝在D盤裡面，安裝完畢後記得配置系統環境變量，將node.js安裝路徑添加進系統環境變量裡面去，除此之外還要添加環境變量然後win+R，輸入cdm ，再輸入node -v如果出現版本號就證明安裝成功。
  • 如何創建SpreadJS的Vue項目？這個方法3分鐘搞定
    安裝vue-cli（耗時30 S）通過命令:npm install -g \@vue/cli 安裝（https://cli.vuejs.org創建 vue-spreadjs 工程（耗時 1 Min）請根據項目需求配置工程選項。
  • Vue CLI3.x 配置指南「初識Vue CLI3.x 版本」
    前言由於之前的項目中都是用的vue-cli 2.x 版本，最近新開的項目使用了vue-cli 3.x 版本的腳手架，因此總結一下筆記，方便以後查看使用。關於舊版本Vue CLI 的包名稱由 vue-cli 改成了@vue/cli。
  • VUE環境搭建和配置
    上期文章我形象的介紹過VUE開發到底是什麼東東，今天我要介紹的是VUE常用環境的搭建和常用框架介紹。(vue2.x+vue-router+axios+webpack) Node.js安裝下載地址Node.js安裝包可以到nodejs下載安裝Node.js雙擊打開後直接下一步到安裝完成即可（Node.js默認安裝目錄為 "C:\Program Files\nodejs\" ， 可以修改目錄）檢測Node.js
  • vue-cli4.x構建項目
    vue-cli是基於webpack 構建vue自動化開發環境的腳手架。啥是腳手架?// 全局的根組件 main.js // 入口函數 .browserslistrc // 配置 postCss自動給css加 瀏覽器前綴的規則 .eslintrc.js // eslint的配置文件 babel.config.js // babel配置文件四、環境配置
  • 如何在vue項目中使用muse-ui並創建一個form表單提交
    Muse UI是基於vue的開源組件庫，包含了不同的控制項；可以自定義主題，實現定製化。如果在vue項目中，如何使用muse-ui？1、在電腦硬碟上，找到一個位置，新建文件夾kmn，然後滑鼠右鍵打開Git命令窗口
  • Vue搭建項目工程(續)
    第一步:繼上次的vue搭建工程項目，使用的是DOS窗體命令行方式來搭建，今天就在介紹另一種搭建工程的方式，在介紹之前還得強調你必須搭建好上次需要開發用到環境,比如需要安裝node.js 和vue.js 在DOS窗體下驗證是否可以使用，再次奉上圖例子，如有疑惑請看上一篇文章。