标签归档：Vue

windows下npm安装vue

发表评论

参考文章：https://www.cnblogs.com/liluxiang/p/9592003.html

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

· npm: Nodejs下的包管理器。

· webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

· vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

开始：

如图，下载8.9.3 LTS （推荐给绝大部分用户使用）

双击安装

可以使用默认路径，本例子中自行修改为d:\nodejs

一路点Next

点Finish完成

打开CMD，检查是否正常

再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs

先如下图建立2个目录

然后运行以下2条命令

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

如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入命令npm config list 显示所有配置信息，我们关注一个配置文件

C:\Users\Administrator\.npmrc

使用文本编辑器编辑它，可以看到刚才的配置信息

检查一下镜像站行不行命令1

npm config get registry

检查一下镜像站行不行命令2

Npm info vue 看看能否获得vue的信息

注意，此时，默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录，

如果直接运行npm install等命令会报错的。

我们需要做1件事情：

1、增加环境变量NODE_PATH 内容是：D:\nodejs\node_global\node_modules

（注意，一下操作需要重新打开CMD让上面的环境变量生效）

一、测试NPM安装vue.js

命令：npm install vue -g

这里的-g是指安装到global全局目录去

二、测试NPM安装vue-router

命令：npm install vue-router -g

运行npm install vue-cli -g安装vue脚手架

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global

win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

重新打开CMD，并且测试vue是否使用正常

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，

他的配置并不全放在根目录下的 webpack.config.js 中。

初始化，安装依赖

运行npm install安装依赖

npm run dev

成功界面，提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件，打开dist文件夹下新生成的index.html文件

nmp下新建出来的vue01的目录描述：

懂的越多，不会的也就越多，知识之路是不断进取的

Vue.js学习笔记

发表评论

体积：33k
虚拟dom，更高的运行效率
双向数据绑定
生态丰富，基于vue.js的ui框架、常用组件
使用场景广泛

安装与部署
1、<script>引用
<script src="https://cdn.jsdelivr.net/npm/" />
2、CLI命令行工具使用,npm
3、CDN

创建第一个vue应用
视图+脚本
视图：<div id="app">
{{mes}}
</div>

脚本：
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
mes: 'hello vue!'
}
});
</script>

数据与方法
每个Vue应用是通过Vue函数创建新的Vue实例开始的
var vm = new Vue({});

<div id = "app">
{{a}} {{b}}
</div>
<script type="text/javascript">
var data = { a: 1 };
var vm = new Vue({
    el : "#app",
    data : data
});
data.a = 2;
</script>

Vue实例使用$区分方法和属性
e.g.
vm.data
vm.$watch —>方法list

生命周期
学习->API->生命周期钩子
生命周期函数不能使用箭头函数，箭头函数没有this
beforeCreate
created
beforeMount：相关的渲染函数首次被调用
mount ed：el创建成功
beforeUpdate：数据更新前
updated：数据更新完成
errorCaptured
activated, destroyed

模板语法
Vue.js使用用了基于HTML的模板语法，所有Vue.js的模板都是合法的HTML，能被遵循规范的浏览器和解析器解析。

文本：{{}}进行数据绑定
v-once，进行一次性插值

原始HTML，v-html标签可以使用html代码,v-bind绑定属性
<div id = "app">
<p v-html="rawHtml"></p>
<div v-bind:class="color">test…</div>
<p>{{number + 1}}</p>
<p>{{ ok? 'YES' : 'NO' }} </p>
<p>{{ mes.split('').reverse().join(' ') }} </p>
</div>

<script type="text/javascript">
var vm = new Vue({
    el: "#app",
    data:{
        msg: "hey",
        rawHtml: '<span style="color:red">this is should be red</span>',
        color: 'red1',
        number: 9 ,
        ok : 1
    }
});
<style type="text/css">
.red1{color: red;}
.blue1{color:blue: font-size:100px;}
</style>

指令
v-前缀的特殊属性
v-if=”seen”
参数，一些指令能接受参数
修饰符，用.指明 <div @click="click1">
<div @click.stop="click2">click here</div>
</div>

class与style绑定
v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
v-bind:class="{active : isActive, green : isGreen}"

样式绑定图示

在中括号里可以使用条件表达式
{}只能是json数组

条件渲染
v-if v-else-if v-else：条件改变少适用
v-show：始终渲染，常切换适用

数组渲染
v-for item in items

数组渲染逻辑

事件绑定：v-on
<button v-on:事件名:”方法名(参数,…,$event)”>
事件名：不同元素拥有各自的事件，如click，dblclick
$event 是原始DOM事件 常用事件修饰符：stop,prevent,passive,capture,self,once 表单输入绑定

v-model 在input,textarea,select上进行数据双向绑定

vue的组件应用：全局组件注册

component的局部注册，是在实例中添加component部分，并注册其名称，如下示范：

<div id="app">
<button-counter></button-counter>
<test></test>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
        props: ['title'],
        data: function () {
                return {}
        },
        template: '<div><h1>hi…</h1></div>',
        methods:{
        }
})
var vm = new Vue({
        el : "#app",
        data : {
        },
        methods:{
        clicknow : function (e) {
                console.log(e);
                }
        },
components:{
        test : {
                template:"<h2>h2…</h2>"
                }
       }
});
</script>

实际应用中很少如上这样局部注册，更多的是通过类似java那样的单文件注册来完成的：

import ComponentA from './ComponentA' 
import ComponentC from './ComponentC' 

export default { 
    components: { ComponentA, ComponentC }, // ... 
}

单文件注册需要进行环境配置：

· 安装 npm

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

· 由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

· 安装 vue-cli

cnpm install -g @vue/cli

· 安装 webpack

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack

参考：Vue.js视频教程
Dcloud
Vue.js文字教程
Vue.js API