node、npm、vue安裝 -- VUE 項目 demo 實例

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。

1. 安裝node:

sudo yum install epel-release
sudo yum install nodejs
node --version  // 安裝好后查看版本

2.?安裝 npm 和?express:

 sudo yum install npm --enablerepo=epelsudo npm install -g expresssudo npm install -g express-generatornpm -v // 安裝好后 查看版本

注意:有時安裝成功后,需要關閉xshell,重新啟動。npm才會生效。

3.安裝 cnpm:

npm install -g cnpm --registry=http://registry.npm.taobao.org

?4.安裝腳手架 vue-cli :

npm install -g vue-cli vue -v // 安裝好后 查看版本

5.?用 vue-cli 構建項目 (windows 和 linux 都可以按此方法構建

選擇一個確定目錄 D:\node,?作為項目存放目錄。

切換到該目錄下,執行命令行命令:

 vue init webpack firstApp // 自動構建一個完整項目

會有一些選項要求選擇設置:?

?選項說明:(如果只是測試項目,可以一直按回車)

Project name :項目名稱 ,如果不需要更改直接回車就可以了。注意:這里不能使用大寫,所以我把名稱改成了vueclitestProject description:項目描述,默認為A Vue.js project,直接回車,不用編寫。Author:作者,如果你有配置git的作者,他會讀取。Install ?vue-router? 是否安裝vue的路由插件,我們這里需要安裝,所以選擇YUse ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。我們這里不需要輸入n(建議),如果你是大型團隊開發,最好是進行配置。setup unit tests with ?Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha,我這里不需要,所以輸入n。Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試,我這里不需要,所以輸入n

創建成功如下圖:(在finished 上面可能會有多行紅色 error 信息,不用關注,無影響。)

這時應該在路徑?D:\node下已經生成項目:firstApp ,結構如下?

(在這一步還沒有文件夾:node_modules,后面才會生成。)

項目結構說明:

build:最終發布的代碼的存放位置。config:配置路徑、端口號等一些信息,我們剛開始學習的時候選擇默認配置。node_modules:npm 加載的項目所需要的各種依賴模塊。src:這里是我們開發的主要目錄(源碼),基本上要做的事情都在這個目錄里面,里面包含了幾個目錄及文件:assets:放置一些圖片,如logo等components:目錄里放的是一個個的組件文件router/index.js:配置路由的地方App.vue:項目入口組件(跟組件),我們也可以將組件寫這里,而不使用components目錄。主要作用就是將我們自己定義的組件通過它與頁面建立聯系進行渲染,面的<router-view/>必不可少。main.js :項目的核心文件(整個項目的入口)引入依賴包、默認頁面樣式等。static:靜態資源目錄,如圖片、字體等。test:初始測試目錄,可刪除.XXXX文件:配置文件。index.html:html單頁面的入口頁面,可以添加一些meta信息或者同統計代碼啥的或頁面的重置樣式等。package.json:項目配置信息文件/所依賴的開發包的版本信息及所依賴的插件信息。README.md:項目的說明文件。webpack.config.js:webpack的配置文件,把.vue的文件打包成瀏覽器能讀懂的文件。.babelrc:是檢測es6語法的文件的配置.getignore:忽略文件的配置(比如模擬本地數據mock不讓他在get提交/打包上線的時候忽略不使用可在這里配置).postcssrc.js:前綴的配置?

cd 到項目路徑下,執行加載 jar 包的命令:

cnpm install 

此后,項目會多一個 node_modules 文件夾,里面是依賴包資源。

6. 運行項目

npm run dev
// 或者:
npm run start

運行成功:

7. 瀏覽器中訪問:localhost:8080

到此Demo 已經正常運行了。

?

附加說明:

8. 把項導入 VSCode?

main.js 是整個項目的主入口:(此頁面代碼固定,可以永遠不修改。)

9. 配置路由

index.js中配置路由,import是引用哪個 vue 文件,routes 是多個路由設置。

如下圖, HelloWorld 和 test? 分別是 2 個 vue 文件。

10. 簡單修改代碼

不用手動刷新瀏覽器,會自動刷新,如下 :?

?另:</template> 標簽相當于 jsp 的<html> 標簽。

就這么多,我還在學...

?

參考:https://blog.csdn.net/jiangyu1013/article/details/83855476

?

?

?

?

?

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448509.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448509.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448509.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

用C語言實現簡單的停車場管理

這個程序是利用棧和循環隊列實現的&#xff0c;自己得先處理好邏輯關系就好了。由于題目沒有要求&#xff0c;這個程序就沒加重復判斷&#xff0c;比如一輛車已經停在車位上或者便道上&#xff0c;再來一輛就判斷不了了。關于棧&#xff0c;就是先進后出的思想&#xff0c;隊列…

推薦一個配置linux服務的網站

該網站的各種linux服務的配置都是基于CentOS系統的 基本上各種linux服務都有了 http://www.server-world.info/en/轉載于:https://www.cnblogs.com/Skyar/p/3582389.html

mariadb數據庫增刪改查

1.常用數據類型 1&#xff09;整數:int, bit 2&#xff09;小數:decimal    #decimal(5,2)表示共有五位數&#xff0c;保留兩位小數 3&#xff09;字符串:varchar, char   4&#xff09;日期時間:date, time, datetime 5&#xff09;枚舉類型(enu…

為什么你工作努力卻沒有起色?

成為職場達人&#xff0c;未必要經常挑燈夜戰。相反&#xff0c;注意到下面幾條&#xff0c;會讓你少走彎路。 1&#xff09;成長的機會永遠比眼前的待遇重要——做重要的事比多拿錢重要。 我知道在水木bbs上的worklife版本&#xff0c;每天都在上演的就是比較自己的第一個o…

《 Spring 實戰 》(第4版) 讀書筆記 (未完結,更新中...)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 Pxx 表示在書的第 xx 頁。 Spring 框架的核心是 Spring 容器。 1. (P7.) 構造器注入是依賴注入的方式之一。 緊耦合&#xff1a;在 …

數據結構排序法之希爾排序法(Shell Sort)

希爾排序&#xff0c;也叫遞減增量排序&#xff0c;是插入排序的一種更高效的改進版本。希爾排序是不穩定的排序算法。 希爾排序是基于插入排序的以下兩點性質而提出改進方法的&#xff1a; 1、插入排序在對幾乎已經排好序的數據操作時&#xff0c;效率高&#xff0c;即可以達…

Windows To Ghost系統封裝之必備軟件集 - 好壓

好壓壓縮軟件&#xff08;HaoZip&#xff09;是強大的壓縮文件管理器&#xff0c;是完全免費的新一代壓縮軟件&#xff0c;相比其它壓縮軟件系統資源占用更少&#xff0c;有更好的兼容性&#xff0c;壓縮率比較高。 它提供了對ZIP、7Z和TAR文件的完整支持&#xff0c;能解壓RAR…

js 彈窗并定時關閉

1. $(input).click(function() {prompt(點擊成功, 2000) })function prompt(newName, time, fn) {var $div $(<div></div>);$div.css({position: fixed,top: 0,left: 0,width: 100%,height: 100%,z-index: 200,background-color: rgba(0,0,0,0.4),// background-c…

數據結構排序法之插入法

插入排序是一種簡單直觀的排序算法。它的工作原理非常類似于我們抓撲克牌。 對于未排序數據(右手抓到的牌)&#xff0c;在已排序序列(左手已經排好序的手牌)中從后向前掃描&#xff0c;找到相應位置并插入。 插入排序在實現上&#xff0c;通常采用in-place排序&#xff08;即…

XSLT學習筆記

1. 樣式聲明&#xff1a;<xsl:stylesheet>或<xsl:transform> 2. XSLT常用元素&#xff1a; 2.1 <xsl:template>&#xff1a;創建模板 Match屬性的作用是使模板和XML元素相關聯 e.g.:<xsl:template match"\">......</xsl:template&g…

職場:人生從沒有最佳時機!一個離職客服人員的領悟

每個人都有感到失落迷惘的時候。 人生用專制又霸道的方式運行著&#xff0c;每當我們心想一切塵埃落定、生活穩固的時候&#xff0c;生活總愛給我們驚喜&#xff0c;粉碎我們短暫的安逸&#xff0c;讓我們不得不重新思考。 「我走對路了嗎?」 「我能夠賺更多錢、爬到更高的地位…

VS Code 的常用快捷鍵

VS Code 的常用快捷鍵和插件 一、vs code 的常用快捷鍵 前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1、注釋&#xff1a; a) 單行注釋&#xff1a;[ctrlk,ctrlc] 或 ctrl/ b) 取消…

vue-axios interceptors

import axios from axios import cookie from js-cookie const options {baseURL: window.location.protocol process.env.BASE_API,headers: {},timeout: 20000 } const fetch axios.create(options)// request攔截器 fetch.interceptors.request.use(config > {if (coo…

數據結構排序法之雞尾酒排序法he快速排序法

雞尾酒排序&#xff0c;也叫定向冒泡排序&#xff0c;是冒泡排序的一種改進。此算法與冒泡排序的不同處在于從低到高然后從高到低&#xff0c;而冒泡排序則僅從低到高去比較序列里的每個元素。他可以得到比冒泡排序稍微好一點的效能。 // 兩兩互換 void swap (int* a, int i, …

VSCode 多開、環境對比

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 多開&#xff1a; 第一種&#xff1a;win10的開始菜單&#xff0c;在vscode圖標右鍵選擇“新開窗口”&#xff0c;這樣就多了一個vscode…

前言_工作兩年自我感觸

17年大學畢業&#xff0c;到今天整整工作兩年&#xff0c;從前端到數據分析&#xff0c;從上家公司&#xff08;簡稱A&#xff09;到現公司&#xff0c;想趁著今天是參加工作兩年的紀念日&#xff0c;回憶過往&#xff0c;結合現狀有感而發。 剛畢業的時候&#xff0c;啥都學&a…

數據結構排序法之堆排序he歸并排序

堆排序&#xff08;Heapsort&#xff09;是指利用堆這種數據結構所設計的一種排序算法。堆是一個近似完全二叉樹的結構&#xff0c;并同時滿足堆性質&#xff1a;即子結點的鍵值或索引總是小于&#xff08;或者大于&#xff09;它的父節點。 堆排序的時間&#xff0c;主要由建…

超詳細設置 Idea 類注釋模板和方法注釋模板

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 網上找了一下&#xff0c;沒有很詳細且正確介紹Idea配置注釋模板的&#xff0c;于是結合多篇文章自己琢磨整理出如下。 設置類注釋模板…

手動創建兩個文本文件text1.txt和text2.txt,按要求創建text3.txt

實現在text1.txt和text2.txt文件中除去首行和末尾對應的數據&#xff0c;要求三個文本內容如下&#xff1a; text1 text2 text3begin begin begin10 11 12 15 16 17 …

感情

團結 共患難的感情轉載于:https://www.cnblogs.com/yyjh/p/11139749.html