如何让新建一个Vue项目

最新推荐文章于 2024-05-16 17:54:12 发布

偶尔躲躲乌云_0

最新推荐文章于 2024-05-16 17:54:12 发布

阅读量288

点赞数

分类专栏： Vue2.0基础文章标签： vue

本文链接：https://blog.csdn.net/Aurora_1970s/article/details/105744960

版权

Vue2.0基础专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.Vue前端框架概述

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

2.新建Vue项目的步骤

1.下载Vue.js

Vue的官方网址：Vue
Vue官方网址的中文版：Vue中文版
访问Vue.js下载这个网址可选择开发版本和生产版本

2.新建项目文件夹

新建项目文件夹为Demo01，在Demo01下新建如下文件夹和文件：
Demo01

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js实例</title>
</head>
<body>
    <h1>Vue2.0实例</h1>
    <hr>
    <ol>
        <li><a href="#">Hello World 实例</a></li>
    </ol>
</body>
</html>

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文件用来配置一些项目的初始化信息及参数。

偶尔躲躲乌云_0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何让新建一个Vue项目

1.Vue前端框架概述Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整...
复制链接

扫一扫