ElementUI+NodeJS環境搭建

時間 2019-11-16

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

原文原文鏈接

Element簡介：javascript

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

這個組件庫的名稱叫作element-ui,基於Vue2.0開發,提供了豐富的PC端組件html

框架的使用方法,大同小異,通常是導入相關文件,須要使用什麼組件就查閱該組件的說明文檔vue

Element官網：https://element.eleme.cn/#/zh-CNjava

Element實例：node

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
        <!-- 引入樣式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入組件庫 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </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>
        
        <script>
            new Vue({
                el:"#app"
            });
        </script>
    </body>
</html>

Node.js是什麼？webpack

Node.js是一個基於Chrome V8引擎的[JavaScript運行環境]。 Node.js使用了一個事件驅動、非阻塞式I/O 的模型。git

Node.js是一個讓JavaScript運行在服務端的開發平臺，它讓JavaScript成爲與PHP、Python、Perl、Ruby等服務端語言分庭抗禮的腳本語言github

簡單的說node.js就是把瀏覽器的解釋器封裝起來做爲服務器運行平臺，用相似javascript的結構語法進行編程，在node.js上運行。web

npm是什麼？

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

Node.js環境搭建

一、下載

下載地址：https://nodejs.org/zh-cn/download/

選擇相應的版本下載，這裏使用的是：node-v10.15.3-win-x64.zip

二、解壓

將文件解壓到指定位置，並在解壓後的目錄下創建node_global和node_cache這兩個目錄

三、配置環境變量

新增NODE_HOME，值爲：D:\initPath\node-v10.15.3-win-x64

修改PATH並在最後添加：;%NODE_HOME%;%NODE_HOME%\node_global;

測試安裝是否成功：打開cmd窗口，輸出以下命令

node -v

npm -v

若是出現版本號就表明成功了

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

打開cmd，分開執行以下命令：

npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"

npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global"

五、修改npm鏡像提升下載速度(能夠使用 cnpm 或直接設置 --registry ，推薦設置 --registry)

設置淘寶源

npm config set registry https://registry.npm.taobao.org/

六、查看淘寶鏡像設置狀況

npm get registry

七、查看npm全局路徑設置狀況

npm install webpack -g

以上命令執行完畢後，會生成以下文件

%node_home%\node_global\node_modules\webpack

注意：下載過程當中出現warn不用管，出現Error，刪掉下載的破碎文件從新下載

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

將下載github的Vue的項目解壓，在解壓的項目中是沒有node_modules的，在工程的根目錄下須要經過npm install進行再次依賴下載

在cmd執行完 npm install下載完成後，啓動項目執行：

npm run dev

項目運行截圖：

相關文章

相關標籤/搜索

solr5.5環境搭建

PHP_PHP環境搭建

Hadoop環境搭建

Linux環境搭建

Windows集羣環境搭建

3D-slicer環境搭建之

搭建項目環境

Linux開發環境搭建

網站建設指南

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<