vue学习(2)

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

Nginx通过https方式反向代理的简单实现

1)nginx的反向代理:proxy_pass 2)nginx的负载均衡:upstream 下面是nginx的反向代理和负载均衡的实例: 负载机:A机器:103...

5K60
来自专栏lonelydawn的前端猿区

基于java swing的设备管理系统

一.系统介绍 一个简易的设备管理系统,包含了管理员登录注册、设备录入、设备状态管理功能,具体状态有购买时、正在运行、正在修理和已报废。 二.开发环境 开发环境:...

35970
来自专栏前端vue

微信公众号授权登陆PHP

在微信公众号请求用户网页授权之前,要先到公众平台官网中修改授权回调域名 正式公众号:开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信...

1.9K40
来自专栏源码之家

新浪应用Dzx!Sae完美反向代理绑米教程

23740
来自专栏MixLab科技+设计实验室

可视化爬虫SPY | 01

今天把我去年开发等可视化爬虫SPY整理了下,虽然它还在demo阶段,但我已经在经常使用来爬取一些数据了,用的过程还是比较方便的,区别于其他纯代码的爬虫工具。 S...

56180
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(九):初识后台管理

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

43030
来自专栏后端技术探索

[干货实战]为最佳性能调优nginx

通常来说,一个优化良好的 Nginx Linux 服务器可以达到 500,000 – 600,000 次/秒 的请求处理性能,然而我的 Nginx 服务器可以稳...

14220
来自专栏Youngxj

Emlog插件:右下角添加不同时段问候语

21630
来自专栏后端云

Raft算法和Gossip协议

raft 集群中的每个节点都可以根据集群运行的情况在三种状态间切换:follower, candidate 与 leader。leader 向 follower...

61530
来自专栏java学习

项目管理工具Maven1

Maven是apache下的开源项目,项目管理工具,管理java项目。

10010

扫码关注云+社区

领取腾讯云代金券