使用淘宝镜像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是淘宝网为了解决国内开发者在使用npm安装包时速度慢、不稳定的问题而推出的一个npm镜像服务。这个服务可以让国内用户通过淘宝的镜像服务器更快地下载npm资源。cnpm与npm在使用方式上基本一致,但是在...
根据提供的文件信息,我们可以推断出这是一份关于Vue.js的教程资料,主要涉及了Vue.js的学习资源分享以及npm配置和Vue CLI安装的部分内容。下面将对这些知识点进行详细的解析和扩展。 ### Vue.js全套详解 #### ...
- **定义**:Vue.js(发音类似于“view”)是一款用于构建用户界面的轻量级JavaScript框架。该框架以其简洁的API、高效的数据绑定以及可组合的视图组件而著称。 - **核心特点**: - **易用性**:Vue.js的设计目标之...
CNPM,全称为China NPM,是中国国内针对NPM(Node Package Manager)的一个镜像服务,由淘宝团队提供。它的主要目的是为了解决由于网络问题导致的NPM包下载速度慢的问题,使得开发者在国内可以更快速地获取和安装...
### Vue.js 使用步骤详解 #### 一、Vue.js 概述与优势 Vue.js 是一款由尤雨溪创建并维护的轻量级前端框架,它主要用于构建用户界面,特别是单页面应用(SPA)。Vue.js 的核心库只关注视图层,易于上手,方便与其他...
- 安装淘宝NPM镜像:`npm install -g cnpm --registry=https://registry.npm.taobao.org` - 使用淘宝NPM镜像:`cnpm install vue -g` **2.5 查看npm配置修改是否成功** 通过命令`npm config get registry`检查是否...
`npm`(Node Package Manager)、`cnpm`(China Node Package Manager)和`webpack`是开发者在进行JavaScript项目管理时经常使用的工具,而`nvm`(Node Version Manager)则帮助管理和切换不同的Node.js版本。...
node下的npm或者国内镜像安装路径乱,不好管理,于是做了此教程。 下载node-v4.2.4.rar减压到相应的目录,本人是减压到”D:\Program Files”这个目录下 环境变量的配置: 1.在path变量中加入————-注意替换...
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.js 是一个流行的前端JavaScript框架,用于构建用户界面。它以简单、易学和高效而闻名,被广泛应用于现代Web开发。以下是从标题、描述和标签中提取的Vue.js相关知识点,以及创建新Vue项目的详细步骤: 1. **Node...
Vue.js是一个流行的前端JavaScript框架,用于构建用户界面和单页应用程序。随着其日益普及,官方提供了一个名为Vue CLI(命令行界面)的工具,它是一个基于Vue.js进行快速开发的完整系统。Vue脚手架就是指Vue CLI的...
Vue.js 知识点概述 在本文中,我们将对 Vue.js 进行详细的介绍,...在本文中,我们介绍了 Vue.js 的定义、特性、优点、安装环境、项目搭建、Webpack 配置等方面的知识点,为读者提供了一个系统的 Vue.js 入门指南。
Vue入门教程 本资源摘要信息是基于 Vue.js 入门教程的详细知识点总结,涵盖 Vue.js 的基本原理、...同时,我们也学习了如何搭建环境,安装 Vue-cli 脚手架构建工具,使用 Vue-cli 构建项目,并了解了 Vue.js 的优点。
JavaScript源代码中的npm淘宝镜像是一个加速Node.js模块下载的工具,主要针对中国大陆用户,由于网络原因,直接使用官方npm仓库可能速度较慢。本文将详细介绍如何修改npm配置以使用淘宝镜像,并讨论一些相关设置。 ...
一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册: import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/...
在开始学习和使用Vue.js之前,正确地安装和配置开发环境是至关重要的一步。然而,在安装过程中可能会遇到各种各样的问题,这些问题可能会阻碍我们的进度。本文将详细介绍如何安装Vue.js以及在安装过程中可能遇到的...
在IT行业中,Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它允许开发者在服务器端使用JavaScript进行开发。而CNPM(China NPM)是淘宝团队为了优化NPM(Node Package Manager)在中国的使用体验而创建的一...
最近在学习renren-fast-vue,npm install时疯狂报错 最开始时报错是说node-...使用 cnpm 安装 node-sass 会默认从淘宝镜像源下载,也是一个办法: cnpm install node-sass 还是不得行 3.创建.npmrc文件 在项目根目录
Vue.js 是一款轻量级的前端JavaScript框架,由Nick Wang创建并在2016年至2018年间担任CTO。Vue的核心理念是通过MVVM(Model-View-ViewModel)模式来简化用户界面(UI)的开发,它以其易学易用、组件化和灵活的特性受...