简介:

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的更多相关文章

  1. 淘宝镜像(CNPM)安装

    淘宝镜像安装:开始-运行-填写cmd,回车键确定- 输入"npm install -g cnpm --registry=https://registry.npm.taobao.org&quo ...

  2. npm安装淘宝镜像cnpm报错npm ERR! errno -4048

    今天在安装淘宝镜像的时候报错了,第一次遇上,表示很懵逼 然后捣腾了半天以为是npm install 的时候出错,后来网上查到是 装淘宝镜像cnpm的时候报错,好像是权限问题,解决方法:  npm ca ...

  3. 后盾网lavarel视频项目---5、淘宝镜像cnpm的原理及如何使用

    后盾网lavarel视频项目---5.淘宝镜像cnpm的原理及如何使用 一.总结 一句话总结: 原理:把npm上面的所有软件copy过来 使用:npm install -g cnpm --regist ...

  4. 用淘宝镜像cnpm代替npm

    安装淘宝镜像cnpm: $ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就大部分可以用cnpm来代替np ...

  5. npm 国内淘宝镜像cnpm

    某些插件很奇怪,需要用国内的镜像下载才可以 #安装淘宝镜像npm install cnpm -g --registry=https://registry.npm.taobao.org #使用淘宝镜像下 ...

  6. 淘宝镜像 cnpm 不是内部命令

    升级npm之后安装淘宝镜像,然后一直提示不是内部命令,网上查看文章 http://blog.csdn.net/fighting_2017/article/details/76979844,发现是路径问 ...

  7. npm 国内淘宝镜像cnpm、设置淘宝源

    1.下载和使用cnpm 某些插件很奇怪,需要用国内的镜像下载才可以 #安装淘宝镜像npm install cnpm -g --registry=https://registry.npm.taobao. ...

  8. 安装淘宝镜像cnpm时出现问题及解决方案

    问题: 解决方案: 安装完成:

  9. npm安装淘宝镜像cnpm

    在cmd中执行 npm install -g cnpm --registry=https://registry.npm.taobao.org

随机推荐

  1. Linux自动化工具之crontab (windows需要手动配置相关服务,具体百度)

    //有的shell解释器是/bin/tcsh而不是传统的/bin/bash.而且两者语法有些差异,注意避免.比如设置变量tcsh是set 变量 =`****`   1.crontab是什么,是linu ...

  2. js的相关距离

    js的相关距离 一.dom对象的距离 ---dom.style.width : 对象本身的内容宽度(这里必须是内联样式中的width,带px)(content) ---dom.style.height ...

  3. ArcSDE 10.0与ArcSDE10.1的又一个区别

    ArcSDE10.0 安装后直接在创建sde表空间和sde用户的时候创建了sde服务:而sde10.1可以直接先通过ArcMap10.1直连数据库,创建sde表空间.sde用户.然后在有必要的情况下再 ...

  4. mysql 索引优化,不走索引的原因

    1.WHERE字句的查询条件里有不等于号(WHERE column!=…),MYSQL将无法使用索引 2.类似地,如果WHERE字句的查询条件里使用了函数(如:WHERE DAY(column)=…) ...

  5. IO流19(完) --- RandomAccessFile实现数据的插入 --- 技术搬运工(尚硅谷)

    原hello.txt文件中的内容:abcdefghijklmn 想要实现的效果是,将xyz插入到abc后面,将文件内容变成:abcxyzdefghijklmn @Test public void te ...

  6. Pandas怎样按条件删除行?

    来自: https://stackoverflow.com/questions/13851535/delete-rows-from-a-pandas-dataframe-based-on-a-cond ...

  7. Nginx与PHP工作原理

    Nginx的工作原理 1.Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location bl ...

  8. Django之ORM多表操作

    1.创建一对多: 1.外键建在多的一方(如:一个出版社可出版多本书,所以建在书的表) 2.创建表: 1.创建外键 2.关联的表名 2.一对多数据的操作 2.1数据的添加: 第一种方法: 第二种方法: ...

  9. .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) 生成的. 这些版本表示单个安装的连续 ...

  10. 解决springmvc 中文post请求乱码的过滤器配置

    在web.xml中添加如下配置 <!-- 过滤器 解决post乱码 --> <filter> <filter-name>characterEncodingFilte ...