vue.js为什么要镜像

vue.js要镜像是因为在用Vue.js构建大型应用的时候使用NPM安装方法会比较慢,所以可以使用淘宝的cnpm镜像来安装vue。

vue.js为什么要镜像

本文操作环境:windows7系统、vue2.0版,DELL G3电脑。

vue.js为什么用cnpm镜像来安装?

在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。但于npm是国外的,使用起来比较慢;就可以使用淘宝的cnpm镜像来安装vue。

首先我们需要下载npm,安装好了node.js,就安装了npm。然后,再利用npm安装淘宝镜像的cnpm。

立即学习“前端免费学习笔记(深入)”;

1、打开cmd,输入命令

npm install -g cnpm —registry=https://registry.npm.taobao.org

登录后复制

安装Vue需要npm的版本大于3,所以我们先升级一下npm,输入命令

cnpm install cnpm -g

登录后复制

安装vue,输入命令

cnpm install vue

登录后复制

安装vue-cli,输入命令

cnpm install —global vue-cli

登录后复制

93455603568a4c10e461641f5301455.png

这时,环境已经搭建好了。

推荐:《vue教程》

2、指定存放项目的路径,运行命令

vue init webpack “项目名称”

成功以后,进入项目所在的目录,运行命令

cd “项目所在文件夹“

然后依次执行下面的命令

cnpm install

登录后复制

b9a283e5bf3f5976fd7dc5137fbe5a5.png

cnpm run dev

登录后复制

b9a283e5bf3f5976fd7dc5137fbe5a5.png

中间省略部分截图。。。。

b8704216c4c2b645d4168b55414eda0.png

成功后我们进入浏览器,输入localhost:8080会展示下面的页面。

a94ccbb1e840a156411138bb114d0b4.png

项目目录:

接下来我们看看上面成功创建的项目,进入项目目录

792674ae27aa895d6d1fd2b222219c2.png

我们开发的目录是在src,src中包含下面的目录

371ebb56fdf1749e5dcb241916218b1.png

assets:存放突变

components:存放一个组件文件

App.vue:项目入口文件,我们也可以直接将组建写这里,而不使用 components 目录

main.js:项目核心文件

我们看看App.vue的内容

  
    vue.js为什么要镜像      
export default { name: ‘app’}app { font-family: ‘Avenir’, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}Hello.vue  
    

{{ msg }}

    

Essential Links

        

Ecosystem

      
export default { name: ‘hello’, data () { return { msg: ‘Welcome to 菜鸟教程’ } }}h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}

登录后复制

以上就是vue.js为什么要镜像的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3020575.html

(0)
上一篇 2025年3月13日 05:38:00
下一篇 2025年2月25日 06:39:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue.js能做app吗

    vue.js能做app,其技术选型是“vue+vue-strap+babel(es6)+webpack+vue-router”,在app开发过程只需关注app的数据走向即可。 本教程操作环境:Windows7系统、Dell G3电脑、vue…

    2025年3月13日
    200
  • 20+道必知必会的Vue面试题(附答案解析)

    本篇文章整理了20+vue面试题分享给大家,同时附上答案解析。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 【相关面试题推荐:vue面试题(2021)】 从镜片的厚度和黄黑相见的格子衬衫我察觉到,面前坐着的这位面试官应该…

    2025年3月13日
    200
  • 详解8种vue组件通信方式,快来收藏!

    本篇文章带大家详细了解一下vue中8种组件通信方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需…

    2025年3月13日 编程技术
    200
  • 通过代码实例,带你了解v-model(值得收藏)!

    本篇文章通过代码实例,带你了解v-model。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 Vue v-model是一个指令,它提供了input和form之间或两个组件之间的双向数据绑定。【相关推荐:vue.js教程】 …

    2025年3月13日 编程技术
    200
  • 4个很 Nice 的Vue Router过渡动效,快来收藏!

    本篇文章给大家介绍4个很 nice 的 veu 路由过渡动效。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 Vue Router 过渡是向Vue应用程序添加个性的一种快速简便的方法。 它让我们可以在应用程序的不同页面之间…

    2025年3月13日 编程技术
    200
  • 一文带你看看Vue Router4中的酷炫功能

    本篇文章和大家一下了解下vue router4中的酷炫功能。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 Vue Router 4 已经发布了,我们来看看新版本中有哪些很酷的特性。【相关推荐:《vue.js教程》】 Vu…

    2025年3月13日
    200
  • 什么是Vuex?Vuex 4初学者指南

    本篇文章带大家了解一下vuex,介绍一下如何在应用程序中使用 vuex。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 Vuex 是 Vue.js 生态系统中必不可少的工具。但是新接触 Vuex 的开发人员可能会被诸如“状…

    2025年3月13日
    200
  • Vue如何进行事件处理?相关基础知识介绍

    本篇文章给大家介绍一下vue事件处理的基础知识。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入,共享数据以及许多其他创造性方式。【相关推荐:《vue.js教程…

    2025年3月13日
    200
  • 深入了解vue.js的3种安装方法

    本篇文章给大家介绍一下三种 Vue.js 的安装方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。vue.js 的目…

    2025年3月13日 编程技术
    200
  • 深入浅析vue3中的custom renderer特性

    本篇文章带大家一起来了解一下vue3的新特性custom renderer。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 【相关推荐:《vue.js教程》】 默认的目标渲染平台 在vue3中允许用户自定义目标渲染平台,以…

    2025年3月13日 编程技术
    200

发表回复

登录后才能评论