vue 腳手架搭建新項目以及element-ui等vue組件的使用


vue快速搭建項目(前提是你的電腦已經安裝了node的環境和vue腳手架安裝,不會的自行百度)

  1:打開終端:

    

  這里說下此時位置是在User下的lijuntao文件夾下面,我一般會在桌面新建一個文件夾然后進去在執行下一步,如果你也想在桌面新建的話,就

    就在終端里面輸入cd desktop摁回車就進到桌面了

    

    ,然后再cd 文件夾名字

    

    

2: 輸入命令vue init webpack-simple vueElemente 回車

    

    此時你就在文件夾vueElement里面新建了一個名字叫 elm_dome的vue項目

    項目描述是 A Vue.js project(可以自己規定)

    作者是lijuntao(可自己規定)

    不用sass這個你自己選擇可用可不用

    還有一種新建項目的方法

    vue init webpack vueElement 回車(這個一般對應比較大的項目工程,你可以兩個都試試看有什么不用)

3:按上面提示做:

    cd vueElement  回車

    npm install ( 我使用的是cnpm install, 兩種一樣,這個是淘寶鏡像方法,因為比較快,不懂的自行百度)

    

  上圖就是正在下載項目項目所需的依賴,

  下圖是成功后的樣子:

    

 4:啟動項目

    npm run dev 回車

    

    這樣就新建新建了一個vue項目 端口是8080,后期項目多了可能需要更改端口,

    如何改端口?

    進入到文件夾 vueElement里面找到 package.json文件

    

    在如下位置添加 - - port 8023 

     

  然后回到終端重啟項目

    ctrl +c

    npm run dev

    

    

  端口是8023

使用element-ui組件 

  http://element.eleme.io/#/zh-CN/component/upload文檔位置

回到終端:

  npm i element-ui -S    相當於 npm install element- ui --save  (推薦使用淘寶鏡像方法,因為快)

  

  再打開你的package.json文件,有如下變化

  

  看文檔的快速上手   地址:http://element.eleme.io/#/zh-CN/component/quickstart

  

   對比自己的package.json文件就可看出,自己文件里面少了一個style-loader,所以就要去配置

   命令:

    cnpm  i  style-loader -D 回車

    

   在打開你的package.json 你會發現多了個style-loader

    

  然后配置你的webpack.config.js文件

    

    其實就是把這一部分補到你的webpack.config.js文件里面的相應位置,

    簡單一句話,對比人家的和你自己的缺什么補什么,直接復制粘貼過去,

   然后就是引用element-ui

    配置mian.js文件

    也是直接對比你的mian.js文件和人家的,缺什么補什么,復制粘貼過去

   然后直接看文檔例子用  

    找到你的文件夾里面的app.vue文件

      更改代碼

      如圖

        

    

      然后回到終端

        npm run dev

       重新運行項目

        效果圖如下

            

 

這里只是用了element-ui里面的一個button按鈕,其他組件請自行看文檔實驗;

  


免責聲明!

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



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