Vue的安装及使用快速入门

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

一、安装vue

1、安装node.js,安装完node.js之后,npm也会自动安装

查询是否安装成功的命令:

node-v

npm-v

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

npminstall--globalvue-cli

3、vue项目初始化命令如下,若没有安装webpack,则先安装webpack

npminstall-gwebpack

vueinitwebpackmyVue

注:安装过程中有个选项(UseESLinttolineyourcode?选择No)

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

4、进入到myVue目录下,使用npminstall安装package.json包中的依赖

命令如下:

cdmyVue

npminstall

5、运行项目:

npmrundev

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

6、结束项目运行:

ctrl+v,选择Y即可停止项目的运行

二、vue项目目录说明

build:项目构建(webpack)相关代码

config:配置目录,包括端口号等

node_modules:npm加载的项目依赖块

src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

assets:放置一些图片,如logo等




转载请注明:http://www.aierlanlan.com/rzfs/1295.html