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>