node.js介绍与npm操作

1.node就是JavaScript的一个运行环境（平台），他不是一门语言，也不是JavaScript框架，可以用来开发服务器端应用程序，web系统，其特点是体积小、快速、高性能。

2.npm是JavaScript的一个包管理工具，类似于java里的maven、gradle，python中的pip。

安装node.js后，打开cmd，执行node -v 回车，查看版本，可以知道是否安装成功。安装成功了node，一般也自动安装了npm，执行npm -v 回车，查看npm版本。

npm操作

1.新建文件夹lesson2，并在目录下新建：css文件夹、js文件夹、fonts文件夹、images文件夹、index.html文件。

2.打开cmd，cd到lesson2文件夹下，执行命令：npm init 进行npm初始化。

3.随便输入个包名package name：02，随便输入个版本名version：1.0.2，摘要description：学习npm，，，，等等。

4.新建完了，就可以在lesson02目录下看到一个package.json，json文件里的内容为：

{

  "name": "02",

  "version": "1.0.2",

  "description": "学习npm",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "小马哥",

  "license": "ISC"

}

5.在cmd中，执行安装包的命令：

npm install jquery --save

安装成功后，发现lesson2目录下多了node_modules，jquery目录被放在这个目录下

同时，package.json的内容也变为将jquery加进去了：

{

  "name": "02",

  "version": "1.0.2",

  "description": "学习npm",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "小马哥",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.3.1"

  }

}

6.在cmd中，执行卸载包的命令：

npm uninstall jquery --save

从GitHub上下载一个vue项目，到执行访问的流程

1.在GitHub上找到目标项目，然后下载下来。

2.cmd到项目目录下，然后执行

npm install

这样就会将vue项目的依赖包全都下载安装下来

"devDependencies": {

    "autoprefixer": "^6.4.0",

    "autoprefixer-loader": "^3.2.0",

    "babel-core": "^6.0.0",

    "babel-loader": "^6.0.0",

    …………

3.执行命令，启动项目

npm run dev

webpack,babel,介绍和vue的第一个案例

1.WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

2.babel是一个JavaScript的编译器，将es6语法的JavaScript编译为es5的代码也兼容的代码。

3.vue第一个案例

1.下载vue.js开发者版本，下载页面的链接：https://cn.vuejs.org/v2/guide/installation.html

2.新建lesson3目录，在目录下新建css目录、js目录、images目录、index.html文件，将vue.js放到js目录下

3.在index.html中使用vue.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

        <h3>{{title}}</h3>

    </div>

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

    <script>

        //1.创建vue实例化对象

        //参数

        var app= new Vue({

            el:"#app",

            //所有的数据都放在数据属性中

            data:{

                title:"土豆"

            }

        })

    </script>

</body>

</html>

vue学习（2）的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  9. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  10. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 保存后自动格式化代码(vscode)

    痛点: 写项目的时候, 我们经常会拷贝一些代码, 每当拷贝过来都需要重新调整, 如果可以实现保存自动调整代码, 将会给我们带来很多的便利! 解决: 其实对于vscode来说, 实现这一点很容易. 我们 ...

  2. 阿里p3c（代码规范，eclipse插件、模版，idea插件）

    阿里p3c 一.说明 代码规范检查插件p3c,是根据<阿里巴巴Java开发手册>转化而成的自动化插件. (高级黑:P-3C“Orion”,反潜巡逻机,阿里大概取p3c先进,监测,发现潜在问 ...

  3. 老男孩python学习自修第二十四天【多进程】

    1. 体验多进程的运行速度 #!/usr/bin/env python # _*_ coding:UTF-8 _*_ from multiprocessing import Pool import t ...

  4. SQL Server 2008 开启远程连接

    除了 IP1.IP2 外,也要把 IPALL 的端口也设置为 1433 参考:SQL Server开启1433端口,彻底解决方案

  5. Matlab提供了两种除法运算：左除（\）和右除（/）

    Matlab提供了两种除法运算:左除(\)和右除(/).一般情况下,x=a\b是方程a*x =b的解,而x=b/a是方程x*a=b的解.例:a=[1  2  3; 4  2  6; 7  4  9]b ...

  6. Atcoder Beginner Contest 118 C-Monsters Battle Royale(贪心)

    题目链接 题意就是要让给出的数字去互相取余,看看能得到最小的数事多少. 那么就可以从小到大排序,每一次都贪心地把最小的数作为攻击者,去攻击其他的数字(也就是大的取余小的),然后再一次排序,循环这个过程 ...

  7. ftell 的使用

    ftell一般用于读取文件的长度,下面补充一个例子,读取文本文件中的内容: #include <stdio.h> #include <stdlib.h> int main() ...

  8. 双击jar文件运行程序

    Java应用程序jar文件可以由 JVM(Java虚拟机)直接执行,只要操作系统安装了JVM便可以运行作为Java应用程序的jar文件.可是,很多朋友遇到一个难题,那就是下载了jar文件以后在Wind ...

  9. kubernetes job的原理

    job例子: apiVersion: batch/v1 #job的apiVersion kind: Job #资源类型为job metadata: labels: name: busybox name ...

  10. The Unique MST POJ - 1679 次小生成树prim

    求次小生成树思路: 先把最小生成树求出来  用一个Max[i][j] 数组把  i点到j 点的道路中 权值最大的那个记录下来 used数组记录该条边有没有被最小生成树使用过   把没有使用过的一条边加 ...