ElementUI+NodeJS環境搭建


Element簡介:

     我們學習VUE,知道它的核心思想式組件和數據驅動,但是每一個組件都需要自己編寫模板,樣式,添加事件,數據等是非常麻煩的,所以餓了嗎推出了基於    VUE2.0的組件庫,提供現成的PC端組件. 

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

     框架的使用方法,大同小異,一般是導入相關文件,需要使用什么組件就查閱該組件的說明文檔

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

 

Element實例:

<!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是什么?

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

   Node.js是一個讓JavaScript運行在服務端的開發平台,它讓JavaScript成為與PHPPythonPerlRuby等服務端語言平起平坐的腳本語言

 

簡單的說node.js就是把瀏覽器的解釋器封裝起來作為服務器運行平台,用類似javascript的結構語法進行編程,在node.js上運行。

 

npm是什么?

     NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,常見的使用場景有以下幾種:

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

 

Node.js環境搭建

  1、下載

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

 

                   選擇相應的版本下載,這里使用的是:node-v10.15.3-win-x64.zip  

 

       2、解壓

     將文件解壓到指定位置,並在解壓后的目錄下建立node_globalnode_cache這兩個目錄

 

  3、配置環境變量

 

      新增NODE_HOME,值為:D:\initPath\node-v10.15.3-win-x64

 

             修改PATH並在最后添加:;%NODE_HOME%;%NODE_HOME%\node_global;

      測試安裝是否成功:打開cmd窗口,輸出如下命令

 

                 node -v

 

              npm -v

      如果出現版本號就代表成功了

 

  4、配置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"

 

 

  5、修改npm鏡像提高下載速度(可以使用 cnpm 或 直接設置 --registry ,推薦設置 --registry)

    設置淘寶源

 

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

 

      6、查看淘寶鏡像設置情況

     npm get registry

 

  7、查看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

 

項目運行截圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM