脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → 第一个vue-cli程序

Vue新手指南之创建第一个vue-cli脚手架程序

 更新时间：2021年05月23日 11:02:16   作者：TheLightOfCode  
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章主要给大家介绍了关于Vue新手指南之创建第一个vue-cli程序的相关资料,需要的朋友可以参考下

1. Vue--第一个vue-cli程序

Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

ElementUI

ICE

1.1 什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；

预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

项目的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

1.2 需要的环境

  •  Node.js
  • Git

确认nodejs安装成功：

  • cmd下输入node -v，查看是否能够正确打印出版本号即可！
  • cmd下输入npm -v，查看是否能够正确打印出版本号即可！

在这里插入图片描述

npm，就是一个软件包管理工具

安装vue-cli

npm instal1 vue-cli -g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

在这里插入图片描述

提示:如果vue list 查询失败请把 node_global目标添加到path环境变量
在这里插入图片描述

1.3 第一个vue-cli程序

1.3.1 创建一个Vue项目

我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录

在这里插入图片描述

1.3.2 创建一个基于webpack模板的vue应用程序

#1、首先需要进入到对应的目录 cdE:\IDEACode\Vue\vue
#2、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue

一路都选择no即可；

说明：

1.3.3 初始化并运行

cd myvue
npm install
npm run dev

命令执行成功后会出现以下提示

在这里插入图片描述

在游览器打开刚刚的端口

在这里插入图片描述

可以在index.js修改端口号等配置文件

在这里插入图片描述

总结

到此这篇关于Vue新手指南之创建第一个vue-cli程序的文章就介绍到这了,更多相关第一个vue-cli程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue中android4.4不兼容问题的解决方法

    Vue中android4.4不兼容问题的解决方法

    这篇文章主要介绍了Vue中android4.4不兼容问题的解决方法,需要的朋友可以参考下
    2018-09-09
  • vue3 使用defineAsyncComponent与component标签实现动态渲染组件思路详解

    vue3 使用defineAsyncComponent与component标签实现动态渲染组件思路详解

    这篇文章主要介绍了vue3 使用defineAsyncComponent与component标签实现动态渲染组件,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • vuejs实现下拉框菜单选择

    vuejs实现下拉框菜单选择

    这篇文章主要为大家详细介绍了vuejs实现下拉框菜单选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Vuei18n 在数组中的使用方式

    Vuei18n 在数组中的使用方式

    这篇文章主要介绍了Vuei18n 在数组中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • axios拦截设置和错误处理方法

    axios拦截设置和错误处理方法

    下面小编就为大家分享一篇axios拦截设置和错误处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue3+vite自定义封装vue组件发布到npm包的全过程

    vue3+vite自定义封装vue组件发布到npm包的全过程

    当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下
    2022-09-09
  • 7个适用于Vue 3的高颜值UI组件库

    7个适用于Vue 3的高颜值UI组件库

    这篇文章主要给大家分享介绍了7个适用于Vue 3的高颜值UI组件库,合理利用,又或者学习借鉴都是不错的选择,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue3和Vite不得不说的那些事

    Vue3和Vite不得不说的那些事

    这篇文章主要为大家详细介绍了Vue3和Vite的那些事，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-02-02
  • vue项目添加多页面配置的步骤详解

    vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置，随着需求的不断增加，发现有必要使用多页面配置。这篇文章主要介绍了vue项目添加多页面配置,需要的朋友可以参考下
    2019-05-05
  • 适合前端Vue开发童鞋的跨平台Weex的使用详解

    适合前端Vue开发童鞋的跨平台Weex的使用详解

    这篇文章主要介绍了适合前端Vue开发童鞋的跨平台Weex的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论