Vue.js是一个构建数据驱动的 web 界面的渐进式框架。
  
      Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易上手,便于与第三方库或既有项目整合。
  
      Vue.js 的安装方法     1.独立版本   2.使用CDN方法 3.NPM方法(推荐使用)
  
      NPM方法:
  
   1) 安装node.js
  
              从node.js官网下载并安装node,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),
  
          输入node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。
  
          npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入 npm -v 命令,显示npm的版本信息。
  
       2) 安装cnpm
  
             在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ,然后等待,没报错表示安装成功。
  
        3) 安装vue-cli 脚手架构建工具
  
             在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
  
             是否安装成功:vue -V
  
             webpack的版本查询:webpack -v       
  
            //若提示webpack不是内容不命令,需要先安装下webpack  命令: npm install webpack -g
  
  ===================================上面的环境已近搭好了=========================================
  
              通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
  
             首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,
  
  在NodeTest 目录下,在命令行中运行命令 vue init webpack firstApp(初始化一个完整版的项目) 。
  
           解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。
  
  其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中。
  
           若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中:vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包:
  
           输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。
  
  Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest
  
  Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
  
  Author:作者,如果你有配置git的作者,他会读取。
  
  Install  vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y
  
  Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n(建议),如果你是大型团队开发,最好是进行配置。
  
  setup unit tests with  www.ysyl157.com Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
  
  Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n
  
      运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:
  
   接下来,我们去NoteTest目录下去看是否已创建文件:
  
    打开firstApp 项目,项目中的目录如下:
  
      介绍一下目录及其作用:
  
       build:最终发布的代码的存放位置。
  
       config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。
  
       node_modules:npm 加载的项目所需要的各种依赖模块。
  
       src:这里是我们开发的主要目录(源码),基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:
  
               assets:放置一些图片,如logo等
  
               components:目录里放的是一个个的组件文件
  
               router/index.yongshiyule178.com js:配置路由的地方
  
               App.vue:项目入口组件(跟组件),我们也可以将组件写这里,而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染,这里面的<router-view/>必不可少。
  
               main.js :项目的核心文件(整个项目的入口js)引入依赖包、默认页面样式等(项目运行后会在index.html中形成一个app.js文件)。
  
       static:静态资源目录,如图片、字体等。
  
       test:初始测试目录,可删除
  
        .XXXX文件:配置文件。
  
       index.html:html单页面的入口页面,可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。
  
       package.json:项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。
  
       README.md:项目的说明文件。
  
       webpack.config.js:webpack的配置文件,把.vue的文件打包成浏览器能读懂的文件。
  
       .babelrc:是检测es6语法的文件的配置
  
       .getignore:忽略文件的配置(比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置)
  
       .postcssrc.js:前缀的配置 
  
       .eslintrc.js:配置es www.weilaiyule178.com lint语法规则(在这里面的rules属性中配置让哪个语法规则失效)
  
       .eslintignore:忽略eslint对项目某些文件的语法规则的检查
  
      这就是整个项目的目录结构,其中,我们主要在src目录中做修改(模块化开发)。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。
  
      cd  项目名;进入项目中
  
      安装项目所需要的依赖包/插件(在package.json可查看):执行 cnpm install   (npm可能会有警告,这里可以用cnpm代替npm了,运行别人的代码需要先安装依赖)如果创建项目的时候没有报错,这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
  
  若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件,然后npm run dev 运行项目
  
      安装完成之后,我们到自己的项目中去看,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。
  
   安装完依赖包资源后,我们就可以运行整个项目了。
  
     运行项目
  
      在项目目录中,运行命令 npm run dev (npm www.michenggw.com run start),会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
  
      项目启动后,在浏览器中输入项目启动后的地址:
  
      在浏览器中会出现vue的logo:
  
  至此,vue的三种安装方式已介绍完毕。
  
  项目完成后输入打包命令:cnpm run build;会生成一个dist文件,就是我们的打包文件,点击.html文件能运行则成功。

转载于:https://www.cnblogs.com/qwangxiao/p/10147408.html

vue.js 三种方式安装--npm安装相关推荐

  1. vue.js 三种方式安装

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  2. vue.js 三种方式安装(vue-cli)

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  3. 【CSDN软件工程师能力认证学习精选】vue.js 三种方式安装(vue-cli)

    CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...

  4. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  5. 【Linux入门到精通系列讲解】Centos 7软件安装的三种方式

    centos 软件安装的三种方式 Linux下面安装软件的常见方法: 一.yum 替你下载软件 替你安装 替你解决依赖关系 点外卖 缺少的东西 外卖解决 1.方便 简单 2.没有办法深入修改 yum ...

  6. 【iOS开发】ipa安装到手机上的三种方式

    转载地址:ipa安装到手机上的三种方式 ipa包 安装三种方式,优先推荐第一种方法(通过iTunes安装). 1.通过iTunes安装 数据线连接手机之后,会自动连接iTunes,(第一次连接的时候会 ...

  7. 计算机系统组装方式,电脑怎么安装系统(电脑系统安装的三种方式)

    作为一个主要讲解电脑方面的网站,电脑怎么安装系统讲的不多,主要是网上有很多攻略了.不过今天还是在来说说电脑安装操作系统,现在安装操作系统一般分为三种方式:光盘安装.硬盘安装和U盘安装,下面就分别讲讲电 ...

  8. Vue的安装及使用(Vue的三种安装使用方式)

    vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库,我们 ...

  9. 在Linux安装配置Tomcat 并部署web应用 ( 三种方式 )

    系统版本:centos6.5版本 java版本:1.7 一.准备工作 1.java -version 检查是否有java环境,没有则需要去安装并配置到环境变量中. 2.下载tomcat包,下载地址:h ...

最新文章

  1. 【Python 2.x和Python 3.x版本有什么区别】
  2. mysql脚本简书,mysql一键安装脚本
  3. Vertx JDBC 批处理
  4. Visual Studio注释快捷键
  5. mysql 服务已经存在_windows下mysql主从同步时从服务器出现表已经存在解决办法
  6. JDBC——连接数据库
  7. 基于Redis的三种分布式爬虫策略
  8. 白英彩 计算机组成原理,国家教委关于批转试行全国考委高等教育自学考试电气工程、电子技术、计算机及其应用三个专业专科考试计划的通知...
  9. 机器视觉在智能制造中的应用
  10. 人人网主页登录_人人网回归,你的前任和全部黑历史将被翻开!买账吗?
  11. DataPipeline王睿:业务异常实时自动化检测 — 基于人工智能的系统实战
  12. log4cxx linux 使用,log4cxx在Linux下的编译使用
  13. App UI设计:“看得见”有多重要
  14. 基辛格等分享: ChatGPT 预示着一场智能革命,而人类还没有准备好
  15. 维基百科创建和百度百科建立有何不同?
  16. 浙江省2019年高考计算机排名,2019年高考各省文理科第一名去向,计算机大热
  17. QueryBuilders的matchQuery
  18. 专业函数绘图软件Origin 7.5中文版
  19. springcloud微服务国际化
  20. 解决Ubuntu 18.04 LTS网络连接不稳定的问题

热门文章

  1. 每天一道LeetCode-----找到第k个排列
  2. 《iOS 应用逆向工程:分析与实战》 pdf 电子书分享
  3. c modern approach‘s forteenth chapter‘s study
  4. std::unique_lock与std::lock_guard区别示例
  5. 计组-CISC/RISC小节
  6. AbstractListView源码分析5
  7. nodejs mysql备份_node.js实现备份mysql数据库功能
  8. oracle分区表编程,Oracle分区表详解
  9. 通过hibernate去调用存储过程
  10. 上海经济适用房申请条件