• 编程小白入门分享四:Vue的安装及使用快速入门


    一、VUE简介


    vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。它是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。它提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

    二、VUE安装


    1、安装node.js,安装完node.js之后,npm也会自动安装
    查询是否安装成功的命令:
    node -v
    npm -v

    2、全局安装脚手架工具vue-cli,命令如下:
    npm install --global vue-cli

    3、vue项目初始化命令如下,若没有安装webpack,则先安装webpack
    npm install -g webpack
    vue init webpack myVue
    注:安装过程 中有个选项(Use ESLint to line your code ?选择 No )

    4、进入到myVue目录下,使用npm install 安装package.json包中的依赖
    命令如下:
    cd myVue
    npm install

    5、运行项目:
    npm run dev

    在浏览器上输入:localhost:8080,将会出现下面的vue初始页面:

    6、结束项目运行:
    ctrl+v,选择Y即可停止项目的运行

    三、VUE项目目录说明


    build:项目构建(webpack)相关代码
    config:配置目录,包括端口号等
    node_modules:npm加载的项目依赖块
    src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
    assets: 放置一些图片,如logo等
    components:该目录里存放的我们的开发文件组件,主要的开发文件都存放在这里了
    App.vue:项目入口文件
    main.js:项目的核心文件
    router:路由配置目录
    static:放置一些静态资源文件
    test:初始测试目录,可删除
    .xxxx文件:这些是一些配置文件,包括语法配置,git配置等
    index.html:首页入口文件
    package.json:项目配置文件
    README.md:项目的说明文档,markdown 格式

    四、VUE项目启动流程


    1、在执行npm run dev的时候,会去在当前文件夹下的项目中找package.json文件,启动开发服务器,默认端口是8080;
    2、找到src的main.js文件,在该文件中new Vue的实例,要加载的模板内容App;
    3、App是src目录下的App.vue结尾的文件;
    4、在App.vue所对应的模板当中,有一个router-view在src目录下有一个router文件夹,该文件夹有个index.js文件,该文件是配置路由词典,指定了路由地址是空,加载HelloWorld组件
    注:vue运行是基于node环境的,构建vue框架之前,需要确保node环境安装成功

    五、VUE的组件的使用


    1、在components文件夹下创建.vue结尾的文件
    例如在:src/components/public/目录下新建header.vue文件
    2、在路由配置文件src/router/index.js中引入组件并配置组件路由
    2.1、引入组件
    import Header from '@/components/public/header'
    2.2、配置组件路由

    {
        path: '/header',
        name: 'header',
        component: Header
    }
    

    3、运行项目:npm run dev
    4、在浏览器中输入:localhost:8080/header ,显示如下页面

    六、VUE生命周期示意图


  • 相关阅读:
    下拉选择框:数字从n到m
    event.target返回事件的目标节点(触发该事件的节点)
    nextSibling使用注意(html的注释)
    mysql导出 csv文件
    ie打印去掉页眉页脚
    jsp标签循环标签体
    String.format字符串格式化方法
    [**奇文共赏**补充问题] 据说看五遍能懂的人智商 > 200
    [转] ARP的处理办法!
    [转] 一张废手机卡的作用大全 (没试过)
  • 原文地址:https://www.cnblogs.com/lxk12345/p/11588595.html
Copyright © 2020-2023  润新知