初探Vue.js及Vue-Cli

这篇具有很好参考价值的文章主要介绍了初探Vue.js及Vue-Cli。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、使用vue框架的简单示例

我们本次的vue系列就使用webstorm来演示:
对于vue.js的安装我们直接使用script的cdn链接来实现
具体可以参考如下网址:
https://www.bootcdn.cn/
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
进入vue部分,可以筛选版本,我这里使用的是2.7.10版本的,可以根据自己的需要选择版本
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
以下是具体示例

<head>
    <meta charset="UTF-8">
    <title>vue.js链接使用示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg1}}</h1>
    <h1>{{msg2}}</h1>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            msg1:'HUAWEI MATE 60 PRO',
            msg2:'轻舟已过万重山'
        }
    })
</script>

那么就可以在网页上显示了,当然这只是一个小示例,不用在意细节
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm

二、使用vue-cli初始化项目

安装node.js的过程我就不说啦,大家可以参考下面这个帖子安装node.js:
node.js安装教程

1.npm设置淘宝镜像源

使用npm时,有时经常会卡住,有时又很慢,这时候我们可以更换为淘宝镜像源安装依赖包

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

然后运行下面的命令检查是否切换成淘宝源

npm config get registry

由于我已经切换了,那么可以检查一下是否为淘宝源,发现已经切换成功了
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm

2.安装vue-cli

以管理员身份运行命令提示符
输入npm install -g @vue/cli(这里的install可以简写为i)

注意

我在这里想补充一些对于自主选择vue-cli版本的问题,一般执行上述安装命令后,会自动下载一个版本,使用vue -V检查一下

初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
如果想自己选择版本则需先卸载已经安装的版本,再重新指定
使用命令npm uninstall -g @vue/cli即可卸载
指定指令为npm i -g @vue/cli@5.0.4,记住,@后面的是版本号,比如我这里指定5.0.4版本

3.初始化项目

选择一个你要将项目创建在哪个地方,比如我选择的是D:\vuejslearn
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
就在这个地址栏输入cmd,回车进入命令行,准备开始创建项目
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
创建项目vue create vuetest,vuetest是我自己取的名字,这个可以自定义,反正就是你这个项目的名字,成功后就是下面的界面
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
这里我们选择Manually select features自定义插件配置
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
这里我们就少选一点,看自己需要我这里就选Babel和Router
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
进入后我们就选2.x
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
接下来就是回答一些问题,由于我选的太快了就没有留下截图,反正接下来就是漫长的等待环节
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
出现如下页面就说明创建成功了
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm

4.启动项目

打开webstorm,打开我们刚刚创建的项目
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
在下方的terminal中输入npm run serve 启动项目
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm
检查一下项目是否启动,在浏览器上面输入http://localhost:8080/#/
看能否出现下面的页面,如果有就成功初始化一个项目了
初探Vue.js及Vue-Cli,vue.js,vue.js,前端,javascript,前端框架,npm文章来源地址https://www.toymoban.com/news/detail-705235.html

到了这里,关于初探Vue.js及Vue-Cli的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 「Vue|网页开发|前端开发」01 快速入门:用vue-cli快速写一个Vue的HelloWorld项目

    本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。 Windows 系统的 node.js 安装十分简易,没有环境安装经验的伙伴可以参考文章:Windows系统下安装node.js 我们需要先创建一个用于放

    2024年02月12日
    浏览(63)
  • 【前端Vue】Vue从0基础完整教程第1篇:vue基本概念,vue-cli的使用【附代码文档】

    Vue从0基础到大神学习完整教程完整教程(附代码资料)主要内容讲述:vue基本概念,vue-cli的使用,vue的插值表达式,{{ gaga }},{{ if (obj.age 18 ) { } }},vue指令,综合案例 - 文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,

    2024年03月09日
    浏览(91)
  • 06 基于Vue+Vue-cli+webpack搭建渐进式高可维护性前端实战项目

         本文是专栏《 Vue + SpringBoot前后端分离项目实战 》的实战第一篇,将从Vue脚手架安装开始,逐步带你搭建起一套管理系统所需的架构。当然,在默认安装完成之后,会对文件目录进行初步的细化拆分,以便后续 功能迭代和维护 所用。 为兼顾大多数计算机毕设的需求,

    2024年02月16日
    浏览(47)
  • 如何解决npm install 的报错npm ERR! network request to http://registry.cnpmjs.org/vue-cli failed

    报错: 解决方法: npm ERR! network request to http://registry.cnpmjs.org/vue-cli failed, reason: getaddrinfo ENOTFOUND 这句话已经很明显的提示 http://registry.cnpmjs.org/vue-cli 请求失败了,但网上其他博客还是让代理这个路径。试了网上很多方法都没有用。最后执行了以下语句,执行成功 直接代理淘

    2024年02月04日
    浏览(89)
  • vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑

    a标签的下载功能: 1:bobl ----二进制流文件 Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据 2:responseType responseType它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以要把它设为‘blob’ 通过设置responseType为blo

    2024年02月02日
    浏览(57)
  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(62)
  • 前端项目,个人笔记(二)【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】

    目录 1、项目中引入阿里矢量库图标 2、实现吸顶交互 3、语法糖--script setup 3.1、无需return  3.2、子组件接收父组件的值-props的使用 3.3、注册组件 步骤一 :进入阿里矢量库官网中:iconfont-阿里巴巴矢量图标库  ,挑选自己需要的图标:         我在查看其他博主的博客时

    2024年04月16日
    浏览(62)
  • less中:export 无效问题,vue-cli中导出公共变量,js对象为空对象

    试例 解决方案 注:在vue-cli v5版本中requireModuleExtension是已经被移除了。在没有任何配置的情况下打印出来的就是一个空对象 通过阅读官方文档,发现可以根据约定将文件名改为.module.(css|scss|sass|less|styl(us)?)结尾,这样就可以识别出css module。 这里是将自己项目中的variables.le

    2024年02月13日
    浏览(78)
  • web前端自学全套视频,学习慕课网 vue-cli3安装,cube-ui安装,前端面试自我介绍

    https://github.com/cube-ui/cube-template/wiki 2019.2.25 1 tab点击切换导航栏: http://ustbhuangyi.com/music/#/rank vue-cli2.9.6 中使用cube-ui注意事项 https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start 淘宝源 使用 cnpm -v 查看是否已经安装 cnpm。如果没有,使用 npm install cnpm -g --registry=https://registry.npm.taobao.or

    2024年04月26日
    浏览(34)
  • 基于vue-cli创建后台管理系统前端页面——element-ui,axios,跨域配置,布局初步,导航栏

    1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请求添加Jwt的设置; 3.进行初始化布局,引入新增页面的方式; 4.home页面导航栏的设置,一级目录,二级目录; 安装成功 布局初步 1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请

    2024年02月09日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包