使用淘宝镜像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 相关文章推荐
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
解决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
php下封装较好的数字分页方法
2010/11/23 PHP
优化PHP程序的方法小结
2012/02/23 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
Python 除法小技巧
2008/09/06 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python利用faker库批量生成测试数据
2020/10/15 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js