Vue介绍、搭建环境以及构建项目

最新推荐文章于 2024-07-13 10:42:11 发布

贝西奇谈

最新推荐文章于 2024-07-13 10:42:11 发布

阅读量1.1k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/beixishuo/article/details/104230203

版权

Vue 专栏收录该内容

11 篇文章 19 订阅

订阅专栏

一、Vue简介

Vue（发音为/vjuː/，类似于view）是用于构建用户界面的渐进框架。与其他整体框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持。

重点：
1.只关注视图层
2.MVVM模式框架
3.SPA（single page web application）应用

-MVVM模式是一种试图与数据双向绑定的框架，即数据发生变化，试图会跟着变化；试图发生变化，数据模型也发生变化，开发者再也不需要操作DOM节点。

案例：乘法表的例子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    //cdn的方式 引入Vue
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <!--MVVM模式-->
<div id="app">
    <input type="text"  v-model="num"/>
    <table border="1">
        <tr  v-for="i in parseInt(num)">
            <td  v-for="j in i">{{j}}*{{i}}={{j*i}}</td>
        </tr>
    </table>
</div>

  <script>
      var app=new Vue({
          el:"#app",
          data:{
              num:9
          }
      })
  </script>
</body>
</html>

效果图：

-SPA 单页面应用(其实就是安装Vue的第二种方式)，可以实现组件化开发，提高开发效率，适用大型项目。这种项目开发完后，只有一个html页面，内容是由一堆js、css渲染的。
spa的缺点：Spa应用部署后只有1个页面，而且这个页面只有一堆js、css文件，所以Spa应用不易被搜索引擎搜到。

二、为什么选择Vue

1.渐进式框架
2.双向数据绑定
3.不需要操作DOM，状态机，状态的改变，会引起视图的更新
4.Vue不仅仅可以构建整个大型应用，还可以作为一个项目的某一个功能实现然后嵌入项目
5.Vue环境构建非常方便：vue-cli指令
6.Vue单文件组件：组件化开发
7.社区非常强大，提供各种各样的插件供我们使用

三、Vue创建方式分为两种

1.使用cdn方式直接引入（一般不用）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
2.利用Nodejs环境搭建Vue（SPA应用,开发一般选择这种）
基本环境安装
首先需要安装两个东西：
1.Nodejs
2.npm（国外镜像）

四、NodeJs的Windows安装

1.下载安装包

下载Nodejs安装包，地址为：https://nodejs.org/en/download/，在页面中点击下载对应的操作系统，windows的推荐下载Windows Installer (.msi)。为了方便，百度云盘地址为：https://pan.baidu.com/s/1B13U3MlIMDFbbltuS5ZbTQ，密码为：z2yu。

2.安装

安装msi的时候需要注意的是选择安装模块的时候可以点击Add to PATH(其中包含了Node.js和npm)，如下：
在这里插入图片描述

3.环境变量配置

1）安装完成后需要设置环境变量：即Path中添加安装地址，如： D:\java\nodejs
在这里插入图片描述

在cmd窗口中输入以下命令，验证安装是否成功：
在这里插入图片描述

四、搭建第一个完整的 vue-cli 项目

在这里插入图片描述
****第一步安装 Node.js 淘宝镜像加速器（cnpm）**（一般选择不装）

这样子的话,下载会快很多~

-g 就是全局安装
npm install cnpm -g

#或使用如下语句解决 npm 速度慢的问题
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装过程可能有点慢~,耐心等待!虽然安装了cnpm,但是尽量少用!
安装位置:
C:\Users\Administrator.SC201803081145\AppData\Roaming\npm
第二步全局安装vue-cli
在指定的文件夹中输入npm install vue-cli -g #只需要第一次安装时执行，以后的vue项目从第三步开始
在这里插入图片描述
第三步使用webpack模板创建自己的项目

这里的 vuehr是项目名称，可以根据自己的需求起名
vue init webpack vuehr

在这里插入图片描述

第四步初始化并执行

cd my-project #进到自己的项目中
npm install #安装依赖
npm run dev #启动项目

> 温馨提示(出现错误时)：
> npm uninstall -g vue-cli 卸载vue-cli
> npm config delete proxy 删除代理

执行完成后,目录多了很多依赖
在这里插入图片描述
安装并运行成功后在浏览器输入：http://localhost:8080

效果:

Vue-cli目录结构

build 和 config：WebPack 配置文件
node_modules：用于存放 npm install 安装的依赖文件
src：项目源码目录
static：静态资源文件
.babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
.editorconfig：编辑器配置
eslintignore：需要忽略的语法检查配置文件
.gitignore：git 忽略的配置文件
.postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
index.html：首页，仅作为模板页，实际开发时不使用
package.json：项目的配置文件
- name：项目名称
- version：项目版本
- description：项目描述
- author：项目作者
- scripts：封装常用命令
- dependencies：生产环境依赖
- devDependencies：开发环境依赖

贝西奇谈

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue介绍、搭建环境以及构建项目

一、Vue简介 Vue（发音为/vjuː/，类似于view）是用于构建用户界面的渐进框架。与其他整体框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持。重点：1.只关注视图层2.MVVM模式框架3.SPA（single page web applic...
复制链接

扫一扫