专栏首页李才哥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 )

初始化完成后的vue项目目录如下:

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文件

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生命周期示意图

本文分享自微信公众号 - 李才哥(liqi13695515224)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-09

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【面试宝典】298- 每天5道题,温故而知新

    本系列文章针对目前常见的面试题,仅提供了相应的核心原理及思路,部分边界细节未处理。后续会持续更新,希望对你有所帮助。

    pingan8787
  • JavaScript 函数作用域和块作用域不完全指北

    我们在 JavaScript 词法作用域不完全指北 中介绍了词法作用域,词法作用域是由你写代码时将变量和块作用域写在哪里来决定的,词法分析器处理代码时会保持作用...

    撸码那些事
  • JavaScript 作用域不完全指北

    对于几乎所有编程语言,最基本的功能之一就是能够存储变量的值,并且能在之后对这个值进行访问和修改。这样就会带来几个问题,这些变量存储在哪里?程序在需要的时候又是如...

    撸码那些事
  • 这些工具是你身边程序员的武器

    作为一名程序开发人员,不管你使用哪门语言开发都有很多可以选择的集成开发环境IDE(Integrated Development Environment),

    Rookie
  • 【JS】302- 回调地狱解决方案之Promise

    在javascript开发过程中,代码是单线程执行的,同步操作,彼此之间不会等待,这可以说是它的优势,但是也有它的弊端,如一些网络操作,浏览器事件,文件等操作等...

    pingan8787
  • JavaScript 箭头函数不完全指北

    我们可以使用 babel 转译器将 ES6 代码转译为 ES5代码, ES5代码如下

    撸码那些事
  • JavaScript 词法作用域不完全指北

    在 JavaScript 作用域不完全指北中,我们介绍了作用域的概念以及 JavaScript 引擎、编译器和作用域的关系。作用域有两种主要的工作模型:词法作用...

    撸码那些事
  • 高考查分小程序开发心得

    明天就是一年一度的高考了,今年的高考报名人数达到了 1031w 的新高,作为一名三年前参考高考的准程序猿,赶在高考前,加班加点从零开始做了一款高考查分小程序,算...

    月小水长
  • 【面试宝典】299- 每天5道题,温故而知新(2)

    本系列文章针对目前常见的面试题,仅提供了相应的核心原理及思路,部分边界细节未处理。后续会持续更新,希望对你有所帮助。

    pingan8787
  • 访客行为跟踪全解析

    不同的设备终端数识别的人方式不同,基本原则都是通过尽量通过各种唯一的ID去作为人的唯一标识,具体如下表:

    GA小站

扫码关注云+社区

领取腾讯云代金券