`
baobeituping
  • 浏览: 1064571 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

第一天学习--使用淘宝镜像cnpm安装Vue.js

    博客分类:
  • vue
 
阅读更多

使用淘宝镜像cnpm安装Vue.js

原创 2017年03月29日 11:23:51
  • 4007
  • 0
  • 11

前言

Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用。今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

步骤

首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 
1.打开命令行窗口,输入

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

获取到cnpm以后,我们需要升级一下,输入下面的命令

cnpm install cnpm -g
  • 1

因为安装Vue需要npm的版本大于3.0.0,所以我们要升级一下,

然后我们输入下面的命令,安装vue

 cnpm install vue
  • 1

接下来安装vue-cli

cnpm install --global vue-cli
  • 1

此时环境就搭建好了。

2.接下来我们需要指定一个目录存放我们的项目,可以选择任意路径,确定好路径后输入下面的命令

vue init webpack "项目名称"
  • 1

3.成功以后,我们进入项目所在目录

cd "项目所在文件夹"
  • 1

然后依次输入下面的命令

cnpm install 
cnpm run dev
  • 1
  • 2

这里写图片描述

成功后我们进入浏览器,输入localhost:8080会展示下面的页面 
这里写图片描述

项目目录

接下来我们看看上面成功创建的项目,进入项目目录 
这里写图片描述

我们开发的目录是在src,src中包含下面的目录 
这里写图片描述

  • assets:存放突变
  • components:存放一个组件文件
  • App.vue:项目入口文件,我们也可以直接将组建写这里,而不使用 components 目录
  • main.js:项目核心文件

  • 我们看看App.vue的内容
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#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;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to 菜鸟教程'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
分享到:
评论

相关推荐

    使用淘宝镜像cnpm安装Vue.js的图文教程

    淘宝镜像cnpm是淘宝网为了解决国内开发者在使用npm安装包时速度慢、不稳定的问题而推出的一个npm镜像服务。这个服务可以让国内用户通过淘宝的镜像服务器更快地下载npm资源。cnpm与npm在使用方式上基本一致,但是在...

    vue.js全套详解百度盘链接.txt

    根据提供的文件信息,我们可以推断出这是一份关于Vue.js的教程资料,主要涉及了Vue.js的学习资源分享以及npm配置和Vue CLI安装的部分内容。下面将对这些知识点进行详细的解析和扩展。 ### Vue.js全套详解 #### ...

    Vue.js入门教程.pdf

    - **定义**:Vue.js(发音类似于“view”)是一款用于构建用户界面的轻量级JavaScript框架。该框架以其简洁的API、高效的数据绑定以及可组合的视图组件而著称。 - **核心特点**: - **易用性**:Vue.js的设计目标之...

    cnpm安装.pdf

    CNPM,全称为China NPM,是中国国内针对NPM(Node Package Manager)的一个镜像服务,由淘宝团队提供。它的主要目的是为了解决由于网络问题导致的NPM包下载速度慢的问题,使得开发者在国内可以更快速地获取和安装...

    vue.js使用步骤

    ### Vue.js 使用步骤详解 #### 一、Vue.js 概述与优势 Vue.js 是一款由尤雨溪创建并维护的轻量级前端框架,它主要用于构建用户界面,特别是单页面应用(SPA)。Vue.js 的核心库只关注视图层,易于上手,方便与其他...

    前端系列vue.pdf

    - 安装淘宝NPM镜像:`npm install -g cnpm --registry=https://registry.npm.taobao.org` - 使用淘宝NPM镜像:`cnpm install vue -g` **2.5 查看npm配置修改是否成功** 通过命令`npm config get registry`检查是否...

    npm.cnpm.webpack.nvm

    `npm`(Node Package Manager)、`cnpm`(China Node Package Manager)和`webpack`是开发者在进行JavaScript项目管理时经常使用的工具,而`nvm`(Node Version Manager)则帮助管理和切换不同的Node.js版本。...

    Nodejs-v4.2.4以及npm和cnpm优雅安装

    node下的npm或者国内镜像安装路径乱,不好管理,于是做了此教程。 下载node-v4.2.4.rar减压到相应的目录,本人是减压到”D:\Program Files”这个目录下 环境变量的配置: 1.在path变量中加入————-注意替换...

    vue-trees-ui-基于Vue的Tree Ui。-Vue.js开发

    install npm install vue-trees --save或cnpm i vue-trees -S快速入门从'vue'导入vue导入vueTrees fue树基于vue 2的树状UI .X install npm install vue-trees --save或cnpm i vue-trees -S快速入门从'vue'导入Vue从'...

    新建vue.docx

    Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面。它以简单、易学和高效而闻名,被广泛应用于现代Web开发。以下是从标题、描述和标签中提取的Vue.js相关知识点,以及创建新Vue项目的详细步骤: 1. **Node...

    第一章 Vue脚手架安装.pdf

    Vue.js是一个流行的前端JavaScript框架,用于构建用户界面和单页应用程序。随着其日益普及,官方提供了一个名为Vue CLI(命令行界面)的工具,它是一个基于Vue.js进行快速开发的完整系统。Vue脚手架就是指Vue CLI的...

    vue 知识点.docx

    Vue.js 知识点概述 在本文中,我们将对 Vue.js 进行详细的介绍,...在本文中,我们介绍了 Vue.js 的定义、特性、优点、安装环境、项目搭建、Webpack 配置等方面的知识点,为读者提供了一个系统的 Vue.js 入门指南。

    vue入门教程.pptx

    Vue入门教程 本资源摘要信息是基于 Vue.js 入门教程的详细知识点总结,涵盖 Vue.js 的基本原理、...同时,我们也学习了如何搭建环境,安装 Vue-cli 脚手架构建工具,使用 Vue-cli 构建项目,并了解了 Vue.js 的优点。

    【JavaScript源代码】npm淘宝镜像修改讲解.docx

    JavaScript源代码中的npm淘宝镜像是一个加速Node.js模块下载的工具,主要针对中国大陆用户,由于网络原因,直接使用官方npm仓库可能速度较慢。本文将详细介绍如何修改npm配置以使用淘宝镜像,并讨论一些相关设置。 ...

    vue富文本编辑器组件vue-quill-edit使用教程

    一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册: import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/...

    vuejs安装教程(经验分享)

    在开始学习和使用Vue.js之前,正确地安装和配置开发环境是至关重要的一步。然而,在安装过程中可能会遇到各种各样的问题,这些问题可能会阻碍我们的进度。本文将详细介绍如何安装Vue.js以及在安装过程中可能遇到的...

    node&cnpm安装及环境配置(1).zip

    在IT行业中,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行开发。而CNPM(China NPM)是淘宝团队为了优化NPM(Node Package Manager)在中国的使用体验而创建的一...

    renren-fast-vue的坑

    最近在学习renren-fast-vue,npm install时疯狂报错 最开始时报错是说node-...使用 cnpm 安装 node-sass 会默认从淘宝镜像源下载,也是一个办法: cnpm install node-sass 还是不得行 3.创建.npmrc文件 在项目根目录

    1.从零理解Vue.pdf

    Vue.js 是一款轻量级的前端JavaScript框架,由Nick Wang创建并在2016年至2018年间担任CTO。Vue的核心理念是通过MVVM(Model-View-ViewModel)模式来简化用户界面(UI)的开发,它以其易学易用、组件化和灵活的特性受...

Global site tag (gtag.js) - Google Analytics