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. 基础知识系列☞C#中→委托

    有些.NET中的高级特性,比如:委托! 有一种怎么也搞不懂的赶脚... 博客读了好几篇,代码也动手写了,书中的一些介绍也看了, 各种搜索关于委托的,至今还处于"会用"的阶段. 该怎 ...

  2. 使用cv::invert()求解Mat矩阵的逆矩阵

    opencv中cv::invert()可直接用来求解矩阵的逆矩阵 函数原型如下: double cv::invert(InputArray  src, OutputArray dst, int  fl ...

  3. CodeForces - 950D A Leapfrog in the Array 玄学题

    题意:n个数1~n(n<=1e18)依次放在一个数组中,第i个数位置为2i-1,其它地方是空的.现在重复以下操作:将最右边的数放到离其左边最近的空的位置,直到所有数移到前一半的位置中.有q< ...

  4. MySQL在linux上的source code安装方法(configure)

    1.建立操作系统用户和组 [root@faspdev ~]# groupadd mysql [root@faspdev ~]# useradd -g mysql mysql 2.解压安装文件,进入解压 ...

  5. 问题：bower git is not installed or not in the path

    用bower install jquery安装jquery,bower提示错误bower git is not installed or not in the path. 根据错误信息的知道出现错误两 ...

  6. Java bytesToHexString 解析

    一.代码 /** * Convert byte[] to hex string * * @param src byte[] data * @return hex string */ public st ...

  7. android(五)----使用WakeLock使Android应用程序保持后台唤醒

    在使用一些产品列如微信.QQ之类的,如果有新消息来时,手机屏幕即使在锁屏状态下也会亮起并提示声音,这时用户就知道有新消息来临了. 但是,一般情况下手机锁屏后,Android系统为了省电以及减少CPU消 ...

  8. li设置float后ul无法包裹li问题解决

    解决办法:灰常简单,只需给ul添加样式 ul{ overflow: auto; } 即可

  9. Ceph 分布式存储

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

  10. PAT 1022 Digital Library[map使用]

    1022 Digital Library (30)(30 分) A Digital Library contains millions of books, stored according to th ...