1.1 vue.js安装与基本使用

　　官网：https://cn.vuejs.org/

　　1、使用之前，我们先来掌握3个东西是用来干什么的

　　　　　　1. npm: Nodejs下的包管理器。
　　　　　　2. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
　　　　　　3. vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

　　2、下载安装　　

　　　　　　1. 下载node.js： https://nodejs.org/en/  （选择左边，不要选最新的）

　　　　　　2. 安装完成node.js后就会生成npm工具，安装完成后即可下载其他工具

　　　　　　3. 利用npm安装vue.js： npm install vue -g

　　　　　　4. 安装完成后会将文件下载到：D:\nodejs\node_global\node_modules 目录下

　　　　　　5. 我们使用vue.js时只需到 D:\nodejs\node_global\node_modules 文件夹下，复制 vue.js 只需在使用时引用即可

　　　　　　6. npm install -g cnpm -registry=https://registry.npm.taobao.org      # 设置淘宝的仓库路径

　　3、引入vue.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <!-- 向容器中渲染新闻-->

    <div id="app">{{ msg }}</div>

    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

        // 定义数据模型

        var data = {

            msg:"vue.js基本使用！！！"   // 使用的数据

        };

        // 定义视图模型

        var app = new Vue({

            // 绑定视图

            el:'#app',

            // 绑定模型

            data:data

        });

    </script>

</body>

</html>

vue.js基本使用

1.2 安装vue中插件

　　1、配置模块安装路径 和环境变量（否则通过npm安装的插件无法再cmd中使用）

　　　　　　1. 首先安装nodejs ,我的位置是D:\nodejs

　　　　　　2. 你自己可以配置模块安装路径：

　　　　　　　　npm config set prefix “D:\nodejs\node_global”
　　　　　　　　npm config set cache “D:\nodejs\node_cache“。

　　　　　　3. 再去配置环境变量，在系统变量里新建 NODE_PATH ,值为 ”D:\nodejs\node_global“，

　　　　　　4. 在用户变量上的path变量添加 ”D:\nodejs\node_global“。 这样应该就可以了

　　　　　　5. 有些包安装后还是下载到：C:\Users\tom\node_modules 文件夹下

　　2、安装vue-devtools插件，便于在chrome中调试vue 

　　　　　　1. 下载压缩包：https://github.com/vuejs/vue-devtools

　　　　　　2. 安装参考地址：https://segmentfault.com/a/1190000009682735

　　　　　　3. 由于下载包编译

　　　　　　　　直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中
　　　　　　　　//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
　　　　　　　　Vue.config.devtools=false;
　　　　　　　　Vue.config.productionTip=false; //阻止vue启动时生成生产消息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello World</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            //配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false

            Vue.config.devtools=false;

            Vue.config.productionTip=false; //阻止vue启动时生成生产消息

            var vm=new Vue({

                el:'#itany', //指定关联的元素

                data:{ //存储数据

                    msg:'Hello World'

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        {{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 -->

    </div>

    <h3>

        {{msg}}

    </h3>

</body>

</html>

生产环境关闭vue提示信息

1.3 vue安装报错整理

　　1、执行 npm install 命令时报错

　　　　　　1、如果你的项目里存在 package-lock.json 文件，删除它。并且删除 node_modules。然后再 npm install。

　　　　　　2、第一步不行的话。运行 npm cache clean --force 或者 npm cache verify 。然后再 npm install。

　　　　　　3、如果上面的都不行，就升级 npm 。 npm i -g npm

　　　　　　解决安装慢问题：npm install --registry=https://registry.npm.taobao.org

　　2、Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

　　　　　　https://blog.csdn.net/qq_32113629/article/details/79740949

01: vue.js安装的更多相关文章

  1. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  2. Vue.js安装

    环境 操作系统:window7 虚拟机:centos7 vue.js: 2.8 安装nodejs 参考我得文章: http://blog.csdn.net/u013066244/article/det ...

  3. vue.js 安装过程（转载）

      一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核 ...

  4. Vue.js安装使用教程

    一.说明 上大学前,请的都是前端JavaScript.后端ASP/PHP/JSP.前后端代码混杂:上大学时,请的都是前端Jquery.后端SSH.前后端代码分离通过模板关联:大学出来后,请的都是前端三 ...

  5. vue.js安装过程(npm安装)

    一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...

  6. Vue.js 安装及其环境搭建

    For me or other first studying vue.js. For Windows PC: 1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本 nodejs的官网 ...

  7. Vue.js 安装

    注意:vue.js 不支持 IE8 及其以下版本,学习前请保证你的浏览器兼容 ECMAScript 5,可访问 http://caniuse.com/#feat=es5 查看支持 ECMAScript ...

  8. vue.js安装教程

    vue.js环境搭建 1.下载node.js 网址:https://nodejs.org/en/ 版本:v10.16.3 2.安装node.js Node.js下载如下所示: 检查nodejs是否安装 ...

  9. 【转载】Vue.js 安装及其环境搭建

    注:最近在学习Vue,以下是环境搭配方法: ****************************************************************************** ...

随机推荐

  1. Linux：32/64位程序（应用程序、共享库、内核模块）

    摘要: Linux系统区分32/64位,相应地,应用程序.共享库和内核模块也区分32/64位. 本文以Ubuntu系统为例,介绍如何编译和使用32/64位的应用程序.共享库和内核模块. 1. 应用程序 ...

  2. python 几个重要的概念

    转自:http://www.cnblogs.com/aylin/p/5601969.html

  3. gulp处理错误

    Gulp 目前的错误处理方式有点操蛋,一旦发生错误进程就挂了,得手动去重启.虽然开发者预期在 gulp 4 中解决此问题 ,但 gulp 4 什么时候发布并没有明确时间表,在此之前,还是很有必要了解一 ...

  4. 请用漂亮欢呼-------Day38

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/marSmile_tbo/article/details/31108557 周末,双休,疯了两天.敲了 ...

  5. 关于Ubuntu中Could not get lock /var/lib/dpkg/lock解决方案

    在Ubuntu中,有时候运用sudo  apt-get install 安装软件时,会出现一下的情况 E: Could not get lock /var/lib/dpkg/lock - open ( ...

  6. Ceph 分布式存储

    前言 Ceph是一个分布式存储系统,诞生于2004年,最早致力于开发下一代高性能分布式文件系统的项目.随着云计算的发展,ceph乘上了OpenStack的春风,进而成为了开源社区受关注较高的项目之一. ...

  7. [py]flask实现用户cmdb

    人最难做到的就是跟自己学习, 总是学习别人的, 沉淀, 过一段时间忘了刚学到的, 在向别人学习, 而非看看自己的沉淀, 殊不知, 世界上最亲近,最默契的人是自己. 用户cmdb功能概述 之前学flas ...

  8. springboot中的日志配置

    日志方式:每天日志存放在一个文件中,info和warn日志存放一个文件,error存放一个文件 创建文件 logback-spring.xml <?xml version="1.0&q ...

  9. 使用tagName定位报错

    使用标签进行定位元素,页面报错,由于input标签不唯一,webdriver默认会取第一个元素,但是第一个input元素的类型是‘hidden’,无法展示,因此程序就报错了 如何解决,未完待续...

  10. JS在不同js文件中互相调用

    例如有这样一个html,里面有一个按钮,当按下时调用b.js文件中的方法b().而b()中又要调用a.js文件中的方法a().若要实现这个功能,必须注意,将要引入的Js文件代码放在</body& ...