我是靠谱客的博主 顺利康乃馨,最近开发中收集的这篇文章主要介绍Vue入门 创建vue项目并安装UI框架ElementUI--1,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

创建vue项目

一、安装node.js
二、安装vue-cli脚手架
三、使用IntelliJ IDEA(或者visual studio code)创建vue项目
四、运行vue项目
五、安装Element-ui

一、安装node.js

  1. node.js官网下载地址:https://nodejs.org/zh-cn/,一路next下来,安装完毕。
  2. 打开cmd(window环境下快捷键window+R),输入node -v
    在这里插入图片描述
    上图就是node.js的版本信息(版本v8.11.2)
    3.由于node.js已经集成了npm(包管理器),所以npm也一起安装好了,输入npm -v
    在这里插入图片描述
    上图就是npm的版本信息(版本5.6.0)。

二、安装vue-cli脚手架

输入npm install vue-cli -g
在这里插入图片描述
我之前安装过,这边就不再安装了,mac的小伙伴也许会出现这个错误
在这里插入图片描述这是因为.npm文件没有sudo权限,输入sudo npm install -g @vue/cli
在这里插入图片描述

输入vue -V,查看是否安装成功
在这里插入图片描述
上图就是安装成功了。

三、使用IntelliJ IDEA创建vue项目

  1. 打开IntelliJ IDEA开发工具,前端开啊工具用的比较多的是visual studio code。找到要创建项目的目录,如下图:在这里插入图片描述
  2. 输入:vue init webpack [项目名称]在这里插入图片描述

四、运行vue项目

1.进入到创建的vue项目下,如下图:

在这里插入图片描述
2.运行vue项目:npm run dev [在这里插入图片描述](https://img-blog.csdnimg.cn/20200204144716647.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTI5MjQx,size_16,color_FFFFFF,t_73.效果如下图所示:
在这里插入图片描述

五、安装Element-ui

1.跟vue搭配使用的最多的UI框架是ElementUI。输入:npm i element-ui -S
在这里插入图片描述2.在node-modules(或package.json)中可以看到ElementUI已经安装好了。在这里插入图片描述3.使用ElementUI。
在这里插入图片描述

最后

以上就是顺利康乃馨为你收集整理的Vue入门 创建vue项目并安装UI框架ElementUI--1的全部内容,希望文章能够帮你解决Vue入门 创建vue项目并安装UI框架ElementUI--1所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(37)

评论列表共有 0 条评论

立即
投稿
返回
顶部