使用淘宝镜像cnpm安装Vue.js
简介:
Vue.js是前端一个比较火的MVVM框架, 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
安装方式:
第一种:使用npm,比较适合比较大型的应用,由于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
这时,环境已经搭建好了。
2、指定存放项目的路径,运行命令
vue init webpack "项目名称"
进入项目所在的目录,运行命令
cd "项目所在文件夹
“
然后依次执行下面的命令
cnpm install
cnpm run dev
中间省略部分截图。。。。
成功后我们进入浏览器,输入localhost:8080会展示下面的页面。
项目目录:
(1) build // 项目构建(webpack)相关代码
build.js // 生产环境构建代码
check-versions.js // 检查node&npm等版本
dev-client.js // 热加载相关
dev-server.js // 构建本地服务器
utils.js // 构建配置公用工具
vue-loader.conf.js // vue加载器
webpack.base.conf.js // webpack基础环境配置
webpack.dev.conf.js // webpack开发环境配置
webpack.prod.conf.js // webpack生产环境配置
(2)config// 项目开发环境配置相关代码
dev.env.js // 开发环境变量
index.js //项目一些配置变量
prod.env.js // 生产环境变量
(3)node_modules// 项目依赖的模块
(4)src// 源码目录
assets// 资源目录 logo.png
components// vue公共组件 Hello.vue
router// 前端路由 index.js// 路由配置文件
App.vue// 页面入口文件(根组件)
main.js// 程序入口文件(入口js文件)
(5)static// 静态文件,比如一些图片,json数据等
.gitkeep
(6)剩余
.babelrc// ES6语法编译配置
.editorconfig// 定义代码格式
.gitignore// git上传需要忽略的文件格式
index.html// 入口页面
package.json// 项目基本信息
README.md// 项目说明
备注:这是我边学习边总结,如果有错误,欢迎大家指出,我会及时改正,谢谢!
使用淘宝镜像cnpm安装Vue.js的更多相关文章
- 淘宝镜像(CNPM)安装
淘宝镜像安装:开始-运行-填写cmd,回车键确定- 输入"npm install -g cnpm --registry=https://registry.npm.taobao.org&quo ...
- npm安装淘宝镜像cnpm报错npm ERR! errno -4048
今天在安装淘宝镜像的时候报错了,第一次遇上,表示很懵逼 然后捣腾了半天以为是npm install 的时候出错,后来网上查到是 装淘宝镜像cnpm的时候报错,好像是权限问题,解决方法: npm ca ...
- 后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用
后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用 一.总结 一句话总结: 原理:把npm上面的所有软件copy过来 使用:npm install -g cnpm --regist ...
- 用淘宝镜像cnpm代替npm
安装淘宝镜像cnpm: $ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就大部分可以用cnpm来代替np ...
- npm 国内淘宝镜像cnpm
某些插件很奇怪,需要用国内的镜像下载才可以 #安装淘宝镜像npm install cnpm -g --registry=https://registry.npm.taobao.org #使用淘宝镜像下 ...
- 淘宝镜像 cnpm 不是内部命令
升级npm之后安装淘宝镜像,然后一直提示不是内部命令,网上查看文章 http://blog.csdn.net/fighting_2017/article/details/76979844,发现是路径问 ...
- npm 国内淘宝镜像cnpm、设置淘宝源
1.下载和使用cnpm 某些插件很奇怪,需要用国内的镜像下载才可以 #安装淘宝镜像npm install cnpm -g --registry=https://registry.npm.taobao. ...
- 安装淘宝镜像cnpm时出现问题及解决方案
问题: 解决方案: 安装完成:
- npm安装淘宝镜像cnpm
在cmd中执行 npm install -g cnpm --registry=https://registry.npm.taobao.org
随机推荐
- Linux自动化工具之crontab (windows需要手动配置相关服务,具体百度)
//有的shell解释器是/bin/tcsh而不是传统的/bin/bash.而且两者语法有些差异,注意避免.比如设置变量tcsh是set 变量 =`****` 1.crontab是什么,是linu ...
- js的相关距离
js的相关距离 一.dom对象的距离 ---dom.style.width : 对象本身的内容宽度(这里必须是内联样式中的width,带px)(content) ---dom.style.height ...
- ArcSDE 10.0与ArcSDE10.1的又一个区别
ArcSDE10.0 安装后直接在创建sde表空间和sde用户的时候创建了sde服务:而sde10.1可以直接先通过ArcMap10.1直连数据库,创建sde表空间.sde用户.然后在有必要的情况下再 ...
- mysql 索引优化,不走索引的原因
1.WHERE字句的查询条件里有不等于号(WHERE column!=…),MYSQL将无法使用索引 2.类似地,如果WHERE字句的查询条件里使用了函数(如:WHERE DAY(column)=…) ...
- IO流19(完) --- RandomAccessFile实现数据的插入 --- 技术搬运工(尚硅谷)
原hello.txt文件中的内容:abcdefghijklmn 想要实现的效果是,将xyz插入到abc后面,将文件内容变成:abcxyzdefghijklmn @Test public void te ...
- Pandas怎样按条件删除行?
来自: https://stackoverflow.com/questions/13851535/delete-rows-from-a-pandas-dataframe-based-on-a-cond ...
- Nginx与PHP工作原理
Nginx的工作原理 1.Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location bl ...
- Django之ORM多表操作
1.创建一对多: 1.外键建在多的一方(如:一个出版社可出版多本书,所以建在书的表) 2.创建表: 1.创建外键 2.关联的表名 2.一对多数据的操作 2.1数据的添加: 第一种方法: 第二种方法: ...
- .NET2.0引用.NET3.5的System.Core.dll&Dapper在.NET2.0下的配置
微软MSDN对.NET2.0,3.0,3.5的描述: .NET Framework 版本 2.0.3.0 和 3.5 是使用同一 CLR 版本 (CLR 2.0) 生成的. 这些版本表示单个安装的连续 ...
- 解决springmvc 中文post请求乱码的过滤器配置
在web.xml中添加如下配置 <!-- 过滤器 解决post乱码 --> <filter> <filter-name>characterEncodingFilte ...