zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Sensor Fusion-based Exploration in Home Environments using Information, Driving and Localization Gains(基于传感器融合的使用信息、驾驶和定位增益在家庭环境中的探索)
    Git中从远程的分支获取最新的版本到本地
    git拉取远程分支到本地分支或者创建本地新分支
    win7下使用git
    ADAS

    struct对齐
    STL容器
    智能指针
    c++中的基本知识点
  • 原文地址:https://www.cnblogs.com/xuepangzi/p/9433045.html
Copyright © 2011-2022 走看看