如何让新建一个Vue项目

1.Vue前端框架概述

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
如何让新建一个Vue项目_第1张图片

2.新建Vue项目的步骤

1.下载Vue.js

Vue的官方网址:Vue
Vue官方网址的中文版:Vue中文版
访问Vue.js下载这个网址可选择开发版本生产版本
如何让新建一个Vue项目_第2张图片

2.新建项目文件夹

新建项目文件夹为Demo01,在Demo01下新建如下文件夹和文件:
如何让新建一个Vue项目_第3张图片

创建好之后把在Vue官网下载的Vue.js拖到项目的assets文件夹下的js文件夹中。反正文件也不大就全部下载拖进去就完事了。example文件夹下写主要的页面代码。index.html作为项目的入口文件

index.html页面的示例代码如下:




    
    
    Vue.js实例


    

Vue2.0实例


  1. Hello World 实例

3.live-server的使用

live-server是用于静态网页的开发和浏览的工具。live-server有最主要的三个功能:修改文件浏览器会自动刷新在命令行输入live-server浏览器自动打开项目(默认打开的就是index.html);本地开发搭建临时的服务。
在VScode中调出终端,输入命令:npm install -g live-server,接着输入live-server如果可以在浏览器看到index.html页面说明live-server安装成功。到此为止,准备工作基本完成。

4.初始化项目

在命令行输入npm init在项目中生成package.json文件用来配置一些项目的初始化信息及参数。

你可能感兴趣的:(Vue2.0基础,vue)