VUE初體驗篇-安裝

2020-12-14 Tingno記

現代前端框架大行其道,講前端思想從操作dom的階段,升級到操作數據的階段。vue作為三大前端框架之一,其中平緩的學習曲線,讓好多前端新手非常喜歡,應用也越來越廣泛。雖然其他兩個框架有facebook,和google撐腰,但是vue已然是不可小覷的對手了。無論你去做前端面試還是公司新項目技術選型,vue一定不會跑出你們的備選名單。下面簡單講講做vue開發第一部,安裝!

安裝nodejs

vue依託nodejs,所以首先要安裝nodejs,官網直接百度

點擊下載連結,其中LTS或者 Current版。由於我電腦是window,我這邊步驟就是直接下載好之後,點擊安裝,一路下一步下一步,就安裝完了。

打開cmd,輸入命令, node -v。正常出現版本號,說明你已經安裝成功了。

小知識:LTS版本是定期更新的穩定版本,是按照時間維度來發布的版本。Current屬於嘗鮮版。

npm說明

npm是Node Package Manager。node的包管理工具,使用node之後你會接觸各種各樣成千上萬的Package(包),就需要一個管理工具能很好的解決它的安裝,更新,依賴包安裝等等的維護。默認安裝完node之後,npm會自動安裝上的。還是cmd,輸入命令 npm -V 。正常出現版本號,就可以了。

vue安裝

有了npm之後,vue只是萬千包中的一個,後續使用命令就不在贅述

npm install vue

等待安裝結束就好了,是不是很簡單

提示:大部分安裝都會指導使用國內的taobao的cnpm,用過幾次之後速度雖然提升不少,但是不知道什麼原因,總是容易出現奇怪的類似依賴裝不上之類的問題。直接用npm雖然沒有刷刷的,但是只要不是特別多包,正常的等個三五分鐘還是可以接受的。

vue-cli腳手架工具

官方提供方便的項目搭建工具,vue-cli。最開始進公司的時候,同事一說什麼腳手架,我說啥玩意兒啊,其實就是搭建工具。去工地蓋房子先要搭建 腳手架 才能開始幹活嘛。vue-cli可以很方便的講很多基礎性的東西都搭建好,滿足絕大部分項目需求。命令:

npminstall -g @vue/cli

官方最新版本3.0的腳手架還提供了圖形界面,用起來簡直不要太爽啊!

直接使用命令啟動圖形界面:vue ui

這裡吐槽下我用的項目的腳手架是公司專門請什麼高人做的腳手架,報錯一大篇,不知道什麼鬼。

項目搭建

至於在圖形界面下如何搭建,就滑鼠點點點就搭建完了。步驟圖見下圖

安裝完啟動

上面安裝界面也都很快的。安裝完之後可以很清晰的看到配置文件:

大功告成了

好了,到這裡就啟動完畢了。可以對照官網了解修改下裡面的東西試試。本來向講的簡單點兒,又囉嗦了!

相關焦點

  • Vue進階篇: vue-loader
    前言在有了前面基礎篇的課程學習基礎上,接下來我們就可以進入到進階篇和實戰篇的學習之旅了
  • vue-cli安裝步驟詳解
    內容導讀四月份已經要悄悄過去了,從三月份辭職到進入新的公司,一切都顯得特別的快,心情也是越發的靜不下來,趁著今天心情特別輕鬆越快,感緊來寫篇筆記先。腳手架是指通過輸入簡單指令幫助你快速搭建好一個基本環境的工具。
  • Vue的安裝及使用快速入門
    一、安裝vue1、安裝node.js,安裝完node.js之後,npm也會自動安裝查詢是否安裝成功的命令:node -vnpm -v2、全局安裝腳手架工具vue-cli,命令如下:npm install --global vue-cli3、vue項目初始化命令如下,若沒有安裝webpack,則先安裝webpacknpm install -g webpackvue init webpack
  • 尤雨溪開發的 vue-devtools 如何安裝,為何打開文件的功能鮮有人知?
    1.
  • 什麼是Vue? 如何安裝和使用Vue?
    安裝導入使用(腳手架)2.Vue框架使用步驟2.1下載Vue框架2.2導入Vue框架2.3創建Vue實例對象2.4指定Vue實例對象控制的區域2.5指定Vue實例對象控制區域的數據這裡就是MVVM中的Modeldata: {name: "某某"}});</script>※1.Vue調試工具安裝
  • GraphQL 實戰篇之前端Vue+後端
    這篇文章記錄使用Vue+GraphQL搭建客戶端。客戶端項目目錄結構如下:安裝首先我們先使用vue-cli新建項目,接著安裝依賴:npm install apollo-cache-inmemory apollo-client apollo-link apollo-link-http
  • Vue全家桶&vue-router原理
    // Vue2學習 第1篇  // 正文:1017字// 預計閱讀時間:8 分鐘
  • 總結 Vue 知識體系之高級技巧應用篇
    那麼怎麼系統地學習和掌握 vue 呢?為此,我做了簡單的知識體系體系總結,不足之處請各位大佬多多包涵和指正,如果喜歡的可以點個小贊!本文主要講述一些vue開發中的幾個高級應用,希望能對大家有所幫助。Vue.use我們使用的第三方 Vue.js 插件。如果插件是一個對象,必須提供install方法。
  • 深入認識 vue-cli:能做的不僅僅是初始化 vue 工程
    藉助 vue-cli,我們通過非常簡單的問答形式,方便地初始化一個vue工程,完全不需要擔心繁複的webpack、eslint配置等等。但是,仍然有許多同學沒有搞清楚 vue-cli和 vue工程之間的關係,導致沒有充分發揮 vue-cli的功能。在這篇文章中,我將從底層原理開始並結合幾個例子,告訴大家 vue-cli還能這樣用。
  • Vue Loader 篇(下):編寫一個單文件 Vue 組件
    引入 Bootstrap 框架開始之前,需要添加 Bootstrap 到 Vue CLI 項目,由於目前所有前端資源都已經通過 NPM 進行管理,所以需要安裝對應的依賴包
  • 2020年5個最佳Vue移動端組件庫|UI框架
    小夥伴們平時開發vue,react或是angular項目,都喜歡使用的什麼UI組件庫呢?今天,就來盤點下,幾個熱門優質的Vue.js移動端UI組件庫。可以只加載聲明過的組件及其樣式文件,無需再糾結文件體積過大採用 CSS3 處理各種動效,避免瀏覽器進行不必要重繪和重排,使用戶獲得流暢順滑的體驗Mint UI 做到了輕量化。
  • Vue入門10 vue+elementUI
    npm的方式安裝,它能更好地和webpack打包工具配合使用。注意:命令行都要使用管理員模式運行1、創建一個名為hello-vue的工程vue init webpack hello-vue2、安裝依賴, 我們需要安裝vue-router、element-ui、sass-loader和node-sass四個插件cd hello-vuenpm
  • @vue/composition-api 與 Vue3 的前生今世
    Vue2 的 gap,或者說為了讓 Vue2 項目也能體驗到 compositions-api 帶來的便利和快感, Vue團隊提供了 @vue/compositions-api 插件的解決方案進行處理。
  • Vue.js系列之vue-resource(6)
    Vue.js系列之vue-router(上)(3) 4. Vue.js系列之vue-router(中)(4) 5.Vue.js系列之vue-router(下)(5)概述前面五篇文章我們已經從簡單的項目搭建到清楚項目結構,以及詳細介紹了vue-router官方插件,現在我們要實現項目的動態數據交互,就要用到接口請求插件vue-resource,它不是Vue官方維護的插件,但是使用是最多的,它可以通過XMLHttpRequest或JSONP發起請求並處理響應。
  • Vue新玩具VueUse
    這不就是曾經我也想自己寫一個 vue 版的 hooks 庫嗎?(因為我覺得 vue3 和 hooks 太像了) 可是我還不太會, 你現在直接把我的夢想給破滅了,下面我們一起來看看吧!讓你在 vue3 中更加得心應手。
  • Vue 新玩具 VueUse
    讓你在 vue3 中更加得心應手。簡單上手安裝 VueUsenpm i @vueuse/core使用 VueUse// 導入import { useMouse, usePreferredDark, useLocalStorage } from @vueuse/core export default { setup() {
  • vue-elemnt-admin學習
    vue-elemnt-admin學習vue-element-admin是一個基於vue,element-ui
  • 如何用 Vue + Vuetify 快速建站?
    (這篇不是 Vue 的基礎介紹,所以建議先讀了 Vue 的官方文檔,再來看怎麼應用。)這篇以開發的個人網站為例,從一個空文件夾開始講到完整個網站,其中包括這幾個模塊:配置開發環境配置 Webpack將 Vuex + Vue-router + Vue-router-sync + Vuetify 整合到整個(代碼參考 https://github.com/weimingwill/personal-website 。
  • Vue2.5+ Typescript 引入全面指南
    寫在前面寫這篇文章時的我,Vue使用經驗三個多月,Typescript完全空白,花了大概三個晚上把手頭項目遷移至
  • 把 Vue-cli 項目遷移至 Vite!
    在第三次這樣做之後,我對遷移過程做了一些詳細的記錄,並將在這篇文章中進行總結, 希望對大家有所幫助。image.pngnpm i vite-plugin-vue2 -D另外,如果你使用的是git hooks,則可能需要顯式安裝