VUE入門環境搭建及demo運行

標簽： vue.js

vue簡介：

Vue.js 是一套構建用戶界面的漸進式框架。他自身不是一個全能框架——只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。

第一步：安裝node.js 下載鏈接https://nodejs.org/en/

node簡介

Node.js是一個Javascript運行環境。實際上它是對Chrome V8引擎進行了封裝。Node 是一個服務器端 JavaScript 解釋器，他會改變服務器應該如何工作的概念。它的目標是幫助程序員構建高度可伸縮的應用程序，編寫能夠處理數萬條同時連接到一個物理機的連接代碼。那直白的說，Node.js就是服務器程序，是用來做后端的技術，不能直接用于前端開發。但是干前端的學會了會更加的牛逼，對編程的思想和代碼效率有很大的提升。Node大量使用時間驅動實現異步開發，能夠高效的打通前后端，所以vue也是采用他作為配置環境，便于大型項目的開發。

如何查看是否安裝成功：黑窗口（命令行）中輸入：node -v

image.png

第二步：安裝vue.js

打開cmd命令框，輸入 npm install vue
如下圖：

image.png

第三步：安裝vue-cli工具

Vue-cli是vue官方提供的一個命令行工具（vue-cli），可用于快速搭建大型單頁應用

打開cmd命令框，輸入 npm install --global vue-cli

第四步：安裝webpack

打開cmd命令框,輸入 npm install webpack -g

第五步：創建vue的demo項目

進入到你想要存放項目的目錄下，執行該命令（ vue init webpack 項目名稱）：
vue init webpack demo_vue
demo項目及生成。

image.png

demo目錄結構

image.png

第六步：運行vue的demo項目

 cd demo_vue   //進入到剛創建的項目中  
$ npm install     
$ npm run dev     //運行項目 

在瀏覽器直接訪問：http://localhost:8080/即可

image.png

本文鏈接：https://blog.csdn.net/suifeng629/article/details/105680247

智能推薦

HBbase單機快速入門環境搭建

下載解壓最新版本 HBase下載地址：http://archive.apache.org/dist/hbase/ 點擊stable目錄選擇不同版本，然后下載后綴為 .tar.gz 的文件; 例如 hbase-0.98.9-hadoop2-bin.tar.gz，解壓縮，然后解壓到指定的目錄. - jdk1.6以上版本配置如果你在命令行鍵入java有反應說明你安裝了Java。如果沒有裝，你需要先安...

nacos最簡入門環境搭建

Nacos官網 https://nacos.io/zh-cn/docs/what-is-nacos.html https://spring-cloud-alibaba-group.github.io/github-pages/hoxton/en-us/index.html#_spring_cloud_alibaba_nacos_discovery 1是什么？ Nacos 致力于幫助您發現、配置和管...

Vue學習【一】環境搭建，demo運行

1、安裝（1）下載NodeJS，利用其中的npm進行vue的安裝。下載完后安裝到本機即可。npm -v，可正常顯示版本信息，安裝成功。下載地址：https://nodejs.org/en/download/ 2、利用npm安裝vue # 全局安裝 vue-cli # 創建一個基于 webpack 模板的新項目（webpack是什么？答：模塊加載器+打包工具） # 這里需要進行一些配置，默認回車...

React-Native 入門環境搭建（Window環境）

這篇文章是我綜合網上大神的博客，RN官網以及自己的一些經驗寫出來的，對于剛入坑的應該有一定幫助，一起努力共同進步，其中有不對的地方請指正，我會虛心學習 Java 開發環境（必須），不會的同學自己去補充準備好所需的軟件： 1、Node.js 下載地址;http://nodejs.cn/download/ 安裝完nod...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

VUE入門環境搭建及demo運行

智能推薦

猜你喜歡