Vue+ElementUI開發 +NodeJS環境搭建

時間 2020-07-11

標籤 vue+elementui vue elementui 開發 nodejs 環境搭建简体版

原文原文鏈接

Vue+ElementUI開發與傳統開發：javascript

ElementUI簡介
咱們學習VUE,知道它的核心思想式組件和數據驅動,可是每個組件都須要本身編寫模板,樣式,添加事件,數據等是很是麻煩的,
因此餓了嗎推出了基於VUE2.0的組件庫,它的名稱叫作element-ui,提供了豐富的PC端組件css

ElementUI官網：http://element-cn.eleme.io/#/zh-CNhtml

簡單案例：vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 1. 導入css -->
		<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
		<!-- 2. 引入vue和vue-router-->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<!-- 未使用vue路由功能可不導入 -->
		<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
		<!-- 3. 引入ElementUI組件 -->
		<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

		<title></title>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-button>默認按鈕</el-button>
				<el-button type="primary">主要按鈕</el-button>
				<el-button type="success">成功按鈕</el-button>
				<el-button type="info">信息按鈕</el-button>
				<el-button type="warning">警告按鈕</el-button>
				<el-button type="danger">危險按鈕</el-button>
			</el-row>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app'
		})
	</script>
</html>

　　展現：java

Node.js是什麼
1 Node.js是一個基於Chrome V8引擎的[JavaScript運行環境]。 Node.js使用了一個事件驅動、非阻塞式I/O 的模型。
2 Node.js是一個讓JavaScript運行在服務端的開發平臺，它讓JavaScript成爲與PHP、Python、Perl、Ruby等服務端語言分庭抗禮的腳本語言 node

npm是什麼
npm實際上是Node.js的包管理工具（package manager）。vue-router

爲啥咱們須要一個包管理工具呢？由於咱們在Node.js上開發時，會用到不少別人寫的JavaScript代碼。
若是咱們要使用別人寫的某個包，每次都根據名稱搜索一下官方網站，下載代碼，解壓，再使用，很是繁瑣。npm

因而一個集中管理的工具應運而生：你們都把本身開發的模塊打包後放到npm官網上，若是要使用，
直接經過npm安裝就能夠直接用，不用管代碼存在哪，應該從哪下載。element-ui

更重要的是，若是咱們要使用模塊A，而模塊A又依賴於模塊B，模塊B又依賴於模塊X和模塊Y，
npm能夠根據依賴關係，把全部依賴的包都下載下來並管理起來。不然，靠咱們本身手動管理，確定既麻煩又容易出錯。json

注1：npm==maven 有點相似

Node.js環境搭建

下載
下載地址：https://nodejs.org/zh-cn/download/
選擇相應的版本下載，這裏使用的是：node-v10.15.3-win-x64.zip

解壓
將文件解壓到指定位置（我這裏是D:\ka\InitPath），並在解壓後的目錄下創建node_global和node_cache這兩個目錄（

node_global：npm全局安裝位置
node_cache：npm緩存路徑

）

配置環境變量

新增NODE_HOME ，值2爲：D:\ka\InitPath\node-v10.15.3-win-x64(解壓的路徑名)

在path添加：;%NODE_HOME%;%NODE_HOME%\node_global;

配置npm全局模塊路徑和cache默認安裝位置

打開cmd，分開執行以下命令：
npm config set cache "D:\ka\InitPath\node-v10.15.3-win-x64\node_cache"
npm config set prefix "D:\ka\InitPath\node-v10.15.3-win-x64\node_global"（若是執行命令卡死，能夠刪除C:\Users\用戶名\.npmrc 後從新執行。（用戶名：爲當前電腦的用戶名））

修改npm鏡像提升下載速度

設置淘寶源：npm config set registry https://registry.npm.taobao.org/

其實此步驟的內容就是將如下代碼添加到C:\Users\用戶名\.npmrc文件中

驗證安裝結果：

版本驗證：node -v ，npm -v

查看淘寶鏡像設置狀況： npm get registry

如何運行下載的Node.js項目

將下載的項目解壓到指定目錄，本例是解壓到：D:\cs\vueproject，後面都以此爲例

1. 打開命令窗口（cmd）

2. 切換到d盤

3. 進入指定目錄(cd D:\cs\vueproject)

4. 進行依賴安裝