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


Posted in Javascript onMay 17, 2018

前言

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

步骤

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

1.打开命令行窗口,输入

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

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

cnpm install cnpm -g

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

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

cnpm install vue

接下来安装vue-cli

cnpm install --global vue-cli

此时环境就搭建好了。

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

vue init webpack "项目名称"

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

cd "项目所在文件夹"

然后依次输入下面的命令

cnpm install 
cnpm run dev

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

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

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

项目目录

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

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

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

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

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>

Hello.vue

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <ul>
  <li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li>
  <li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li>
  <li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li>
  <li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li>
  <br>
  <li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li>
 </ul>
 <h2>Ecosystem</h2>
 <ul>
  <li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li>
  <li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li>
  <li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li>
  <li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" 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的图文教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
详解http访问解析流程原理
Oct 18 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
js实现选项卡效果
Mar 07 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
解决Mac安装thrift因bison报错的问题
May 17 #Javascript
Vue中的字符串模板的使用
May 17 #Javascript
快速解决brew安装特定版本flow的问题
May 17 #Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 #Javascript
通过一次报错详细谈谈Point事件
May 17 #Javascript
AngularJS日期格式化常见操作实例分析
May 17 #Javascript
Node 升级到最新稳定版的方法分享
May 17 #Javascript
You might like
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
yii2安装详细流程
2018/05/23 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
php实现登录页面的简单实例
2019/09/29 PHP
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
解读! Python在人工智能中的作用
2017/11/14 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python设置随机种子实例讲解
2019/09/12 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python如何设置静态变量
2020/09/07 Python
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
最新教师自我评价分享
2013/11/12 职场文书
大学生求职自我评价
2014/01/16 职场文书
主题教育活动总结
2014/05/05 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
依法行政工作汇报
2014/10/28 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
给老婆的保证书
2015/01/16 职场文书
2015感人爱情寄语
2015/02/26 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL