element ui框架（准备）

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        和vue代码配合最好的ui框架，基本上就是element ui了。做前端开发的同学，只要用到vue，就会使用到element ui。这和bootstrap有点相像，早期的时候用到jquery，基本就会用到bootstrap。但是，要用到element ui，我们还是需要做一些必要的准备。

        和之前vue学习参考的视频一样，本专栏涉及到的代码开发部分，也同样来自于这个视频，https://www.bilibili.com/video/BV1rb4y1S7Lg，结合视频和blog内容，就可以掌握vue和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

        如果网络不顺畅，可以选择使用taobao的镜像源，即，

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

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代码，地址在这，https://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这些都有可能。所以，最终网页是什么端口，这个根据最终的情况灵活做出选择即可。