element ui框架（準備）

語言: CN / TW / HK

時間 2022-09-17 11:49:47 平凡的程序員

和vue代碼配合最好的ui框架，基本上就是element ui了。做前端開發的同學，只要用到vue，就會使用到element ui。這和bootstrap有點相像，早期的時候用到jquery，基本就會用到bootstrap。但是，要用到element ui，我們還是需要做一些必要的準備。

1、安裝node.js環境

node.js可以看成是開發平台。js和node.js的關係，有點類似於c++和visual studio。node.js不僅僅可以開發前端代碼，還可以開發後端代碼。比如現在用的比較多的express框架、koa框架等等的，都是在node.js上面開發的。

安裝好了，輸入node -v就會顯示相關的打印，

C:\Users\feixiaoxing>node -v
v16.17.0

2、熟悉npm

在node.js上面可以用npm安裝大量的第三方庫，這是比較方便的。某種意義上説，node.js有很多的輪子，開發的同學不需要自己再造輪子，直接使用別人開發好的代碼就可以了。一般來説，安裝好了node.js，npm也同步安裝好了。可以通過輸入npm -v命令來進一步驗證，

C:\Users\feixiaoxing>npm -v
8.15.0

3、安裝vue-cli命令

使用vue-cli可以直接創建vue工程。工程中，不同的目錄、不同的代碼都已經準備好了，開發者只需要在對應的目錄添加項目文件即可。安裝的命令如下所示，

npm install vue-cli -g

4、安裝webpack庫

一般來説，安裝vue-cli的時候會默認安裝webpack庫的。為了防止webpack沒有被安裝，我們可以手動安裝一下。當然，在此之前，可以用vue list查看下，

C:\Users\feixiaoxing>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

如果在打印中發現沒有wenpack庫，可以輸入

npm install webpack -g

5、創建第一個vue項目

通常情況下，直接輸入vue init webpack demo就可以創建一個demo項目，但是由於配置的原因，輸入命令並不總是成功的。一種變通的方法就是，

a) 先下載一個vuejs-template代碼，地址在這， http://github.com/vuejs-templates/webpack.git

b) 利用下載的代碼生成項目模板，即vue init ./webpack demo

6、編譯第一個demo工程

經過第5步的操作之後，一般就可以創建好demo代碼了。下面要做的就是進入代碼目錄、下載第三方模塊、編譯運行、發佈。

cd demo
npm install
npm run dev
npm run build

7、查看創建的網頁

有了1-6的鋪墊，基本上在輸入node run dev之後，就可以查看到對應的前端網頁代碼了。通常情況下，輸入的網址是http://127.0.0.1:8080，如果你的8080端口已經被佔用，那麼可能會被分配到其他的端口，比如8081、8082這些都有可能。所以，最終網頁是什麼端口，這個根據最終的情況靈活做出選擇即可。

「其他文章」