Vue2.5学习笔记之如何在项目中使用和配置Vue

最开始的项目开发中，我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。

<script src="../xxx.js"></script>

Vue 我们也可以这种引入的方式

<div id="root">{{name}}</div>
<script src="./dist/vue.js"></script>
<script>
 const vm = new Vue({
  el: '#root',
  data: {
   name: 'Vue'
  }
 })
</script>

随着前端的发展我们出现了模块化的开发方式，例如异步（AMD）、同步（CommonJS）等等。

在我们正式开始 Vue 项目开始的时候，我们现在安装一个 Vue Devtools 一个官方的 Vue 调试 chrome 插件，安装之后我们在 chrome 的控制台就可以看到我们创建的 Vue 的对象实例。

Vue-CLI

Vue 给我们提供了上述所有方式的项目引入方式，不但如此，Vue 还给我们提供了一个目前非常流行，非常牛逼的脚手架（Vue CLI ）工具，它能在短短的几分钟之内就能构建一个完整的单页面应用 (SPA)项目。其中包含：热加载、校验、打包等构建项目等工具；下面我们来一步一步的构件一个新的项目。

安装工具

//npm
npm install -g @vue/cli

//yarn
yarn global add @vue/cli

安装完成以后我们验证下有没有安装成功，执行下面命令后如果安装成功后，会显示版本号，我安装的版本是 3.0.4

vue --version

如果你和我一样恭喜你你安装成功了，如果没有安装成功你可以查看下权限的问题或者该用 cnpm 试试。

安装成功之后，我们执行以下命令就可以创建一个完整的项目案例。

vue create my-project

执行上述命令以后，会让我们选择是按照默认（default）的配置，还是选择执行配置，如果你已经非常熟悉了脚手架工具或者默认的配置你满足不了你的需求，你可以选择自己行配置，不过这里还是建议不太熟悉的同学还是使用默认配置就行。

等待安装完成之后，我们执行下面命令就可以看到我们的初始化项目了。

cd my-project
npm run serve

我这里给的是 8080 端口，我们本地访问 localhost:8080 查看我们的初始化项目

总结

以上所述是小编给大家介绍的Vue2.5学习笔记之如何在项目中使用和配置Vue ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

    2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

  • vue2.5.2使用http请求获取静态json数据的实例代码

    1.配置 build/webpack.dev.conf.js // 获取静态json数据 const express = require('express') const app = express() const apiServer = express() const bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyPar

  • Vue2.5通过json文件读取数据的方法

    1.准备工作 1.1 webpack.dev.conf.js 在 const portfinder = require('portfinder') 的下面加上以下代码 const express = require('express') const app = express() var appData = require('../data.json')//加载本地数据文件的路径 var leftMenu = appData.leftMenu //获取对应的本地数据 var 数据名称 = app

  • Vue2.5学习笔记之如何在项目中使用和配置Vue

    最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可. <script src="../xxx.js"></script> Vue 我们也可以这种引入的方式 <div id="root">{{name}}</div> <script src="./dist/vue.js"></script> <script> con

  • vue项目中,main.js,App.vue,index.html的调用方法

    如下所示: 1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App.vue的子组件.所以我将router标示为App.vue的子组件. 1.index.html文件入口 2.src放置组件和入口文件 3.node_modules为依赖的模块 4.config中配置了路径端口值等 5.build中配置了webpack的基本配置.开发环境配置.生产环境配置等

  • vue项目中的webpack-dev-sever配置方法

    问题描述:在vue项目中运行npm run dev启动服务器,然而在同一个局域网下的外部设备不能该服务器 解决方案:在项目的config文件夹下找到index .js中的host把默认的localhost更改为0.0.0.0, 然后外部设备就可以访问该项目启动的服务了(注意必须是在统一局域网下) 以上这篇vue项目中的webpack-dev-sever配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解如何为SpringBoot项目中的自定义配置添加IDE支持

    详解如何为SpringBoot项目中的自定义配置添加IDE支持

    导言 代码是写给人看的,不是写给机器看的,只是顺便计算机可以执行而已 --<计算机程序的构造和解释(SICP)> 导言 在我们的项目里经常会出现需要添加自定义配置的应用场景,例如某个开关变量,在测试环境打开,在生产环境不打开,通常我们都会使用下面的代码来实现,然后在Spring Boot配置文件中添加这个key和Value Application.java: application.properties 或者是没有使用@Value而直接在XML中使用我们配置的属性值 application.x

  • react项目中@路径简单配置指南

    目录 前言 1. 安装craco 2.根路径下创建 craco.config.js 3. 修改package.json文件的script字段 4.使用 补充:React 配置 @ 路径别名 总结 前言 无论是vue还是react开发,我们通常需要引入路径的便捷化配置,通常我们都会约定使用路径@作为根路径地址.如果是个人react开发的@路径简单配置 1. 安装craco yarn add @craco/craco 2.根路径下创建 craco.config.js const path = req

  • .Net项目中NLog的配置和使用实例详解

    .Net项目中NLog的配置和使用实例详解

    引言: 因为之前在项目开发中一直都是使用的Log4Net作为项目的日志记录框架,最近忽然感觉对它已经有点腻了,所以尝试着使用了NLog作为新项目的日志记录框架(当然作为一名有志向的攻城狮永远都不能只局限于眼前的技术,要不断的使用和学习新的技术).当然serilog也是一个不错的日志记录框架哟,不过今天主要还是要讲述的是NLog在项目中的配置和使用. NLog框架源码:https://github.com/NLog/NLog 一.导入NLog NuGet PackAge: 二.配置NLog 配置文

  • 详解vue-loader在项目中是如何配置的

    什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角--vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用于处理.vue文件. .vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件.每个 .vue 文件包含三种类型的顶级语言块 <template>.<script>和 <style>. vue-loader 会解析文件,提取每个

  • angularjs学习笔记之完整的项目结构

    angularjs学习笔记之完整的项目结构

    今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$scope的含义 3.模块化和依赖注入. 一.演示一个完整的项目结构. 下面的所有这些代码,都是转载于@大漠穷秋 老师的.我转载来之后放到了github上,大家可以去这个链接看源代码.一边看,一边学习,效果最好了---- 下面我们来看这个截图, 这就是一个完整的angularjs项目应该有的目录结构.下面我来讲解每一个文件夹对应的分别是什么含义. 1.css:不用说了,就是放一些css的样式文件. 2.framework:这里一般放

  • C#学习笔记之飞行棋项目

    本文实例为大家分享了C#控制台实现飞行棋项目的具体代码,供大家参考,具体内容如下 飞行棋游戏介绍 此次编程实现的飞行棋和我们小时候玩的有些不一样,规则大致类似,但是我在学习过程中的飞行棋大大简化了过程:当前编写的程序适合双人玩(也可改成更多人),主要存在以下几种关卡: 幸运轮盘*:给玩家两种选择 1–交换位置:2–使另一玩家退6格 地雷$:玩家退6格 暂停&:玩家暂停一回合 时空隧道#:玩家前进10格 玩家互踩会使另一玩家退6格 玩家A和玩家B先到终点处获胜 飞行棋游戏编写 该游戏存在100个字

  • Laravel框架学习笔记（二）项目实战之模型（Models）

    Laravel框架学习笔记（二）项目实战之模型（Models）

    在开发mvc项目时,models都是第一步. 下面就从建模开始. 1.实体关系图, 由于不知道php有什么好的建模工具,这里我用的vs ado.net实体模型数据建模 下面开始laravel编码,编码之前首先得配置数据库连接,在app/config/database.php文件 'mysql' => array( 'driver' => 'mysql', 'read' => array( 'host' => '127.0.0.1:3306', ), 'write' => ar

随机推荐