初探Vue + elementUI前端开发--安装

版权声明:copyright by 哈佛小丸子 https://blog.csdn.net/hafoxiaowanzi/article/details/86692676

        这么多年了一直以来都是采用VS进行C、C++等代码开发,对于前端开发也是刚刚接触,这里记录一下使用的过程权当是给自己一个笔记和复习查找的地方。这里要学习的是nodejs编程中使用Vue + elementUI进行前端页面开发。首先从安装开始。

第一当前是需要先安装noddejs,我使用的是window版的nodejs,使用node -v显示的是

下面开始进行Vue + elementUI的安装和项目建立

1.由于我们公司本身服务器就是在新加坡所以说那个npm下载源不存在比较慢的情况,很多时候可能由于限制,npm下载很慢或者不能访问,这样的话可以使用淘宝的npm源去下载,这里不做太多说明如何设置,可以度娘或者google大把的教程。

  我使用的是visual studio code IDE,同时先创建D:\code\nodejs\Vue_elementUI文件夹,在VS code中打开Folder选择Vue_elementUI文件夹,由于IDE中安装了terminal终端在打开foler同时,控制台终端也打开了

在控制台中输入如下命令:npm install -g vue-cli

初始化项目(创建项目),通过指令:vue init webpack demo,会产生提示一路回车即可,系统会自动安装vue项目需要库文件

安装完成后在D盘的Vue_elementUI文件夹下回创建一个deo文件,而且会自动包含如下图中的文件及文件夹

如果你的文件夹中没有node_modules的文件,那么你就要在命令行中打开你的项目并输入: npm install

执行cd .\demo\,进入demo文件夹

通过执行:npm run dev指令,会自动进行编译及执行Vue给出访问地址 http://localhost:8080

使用浏览器访问 http://localhost:8080即可弹出下面页面,这样Vue.js Web框架安装完成

接下来我们继续安装Element-UI库,

通过按ctrl +c,断开Vue的运行

控制台中执行如下命令:npm i element-ui -S

猜你喜欢

转载自blog.csdn.net/hafoxiaowanzi/article/details/86692676
今日推荐