精华内容
下载资源
问答
  • 在本教程中,我们将学习如何启动和运行Vue,同时回答您可能遇到的一些初始问题。 如何在项目中添加Vue Vue只是JavaScript,这意味着您可以通过在HTML文档中包含脚本标签来加载它。 Vue的网站建议使用诸如...

    vue 运行启动命令

    在本系列的介绍性帖子中,我们谈到了Web设计师如何使用Vue可以受益。 在本教程中,我们将学习如何启动和运行Vue,同时回答您可能遇到的一些初始问题。

    如何在项目中添加Vue

    Vue只是JavaScript,这意味着您可以通过在HTML文档中包含脚本标签来加载它。 Vue的网站建议使用诸如https://cdn.jsdelivr.net/npm/vue类的CDN,以确保获得最新版本。 您还可以使用其他特定于版本的链接,例如https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js

    <script src="https://cdn.jsdelivr.net/npm/vue" type="application/javascript"></script>

    注意 :如果要创建生产应用程序,建议您使用像yarn这样的程序包控制器来管理所有依赖项,并将其部署到CDN驱动的位置。 如果您想将Vue内置到JavaScript包中(例如使用Webpack之类的东西),那么这尤其重要。

    了解标记和模板

    创建Vue“实例”时,可以使用配置对象中的el选项将实例连接到DOM。 el选项应该是元素或CSS选择器字符串。 该元素也可以包含模板代码。 因此,在页面HTML中,可能会有类似以下内容:

    <div id="app">
      <h1>{{title}}</h1>
      <p>{{content}}</p>
    </div>

    然后在您JavaScript中,您将获得以下内容:

    var app = new Vue({
      el: "#app",
      data: {
        title: "Threat Level Midnight",
        content: "AGENT MICHAEL SCARN, ruggedly handsome without even trying, relaxes at his desk, feet up, reviewing a case file. His gunrests next to his FBI badge, which glints in the office’sbuzzing florescent light. Dressed in a suit, he’s loosened his tie and undone some of the buttons, revealing his hairy chest."
      },
    
    })

    同样,请注意, "#app"字符串是指HTML中的div。 Vue将用Vue渲染步骤的结果替换该div的内部内容。

    Vue在后台做什么

    我们已经确定Vue允许我们将视图与数据分开。 可以在视图本身中执行一些逻辑,但是我们能够避免以下导致代码不良或状态不正确的模式:

    • 在DOM中存储/读取数据
    • 使用直接DOM操作和修改而不是模板渲染来更新DOM
    • 使用过程方法以不连贯的方式评估状态,这通常会导致DOM表示与预期状态不匹配

    那么这是如何工作的呢?

    Vue允许您在data选项中设置信息。 将观察到传递给该对象内部的任何键值对的更改,并且在数据更改时将重新呈现依赖于该数据段的任何内容。

    这实质上意味着data对象是React性的 。 如果您使用JavaScript的内置数据操作方法,则更改将触发Vue的渲染引擎发挥作用。

    例如,如果您的数据对象是这样设置的:

    var vm = new Vue({
      el: "#app",
      data: {
        items: []
      }
    });

    使用此模板代码:

    <div id="app">
      <div v-for="item in items">{{item.text}}</div>
    </div>

    然后添加一些项目,如下所示:

    vm.items = [{text: "Diversity Day"}, {text: "Beach Trip"}]

    该模板将自动重新渲染,迭代(循环)所设置的项目。

    React性的重要警告

    由于允许Vue监视data对象(对象获取器和设置器)JavaScript功能在添加新键或删除现有键时不提供信息,因此添加和删除键不会触发任何重新渲染。 因此,在上面的同一示例中,如果初始数据对象为空(不存在items: [] ):

    var vm = new Vue({
        el: "#app",
    	data: {}
    })

    vm.items任何更改都不会触发重新渲染。 从Vue文档中:

    “ Vue不允许向已创建的实例动态添加新的根级React性属性。”

    此外,需要特别注意的是,当使用语法array[index] = 'new value'将项目添加到数组中时,不会触发重新渲染。 相反,您应该使用splice或Vue的Vue.set方法,这超出了本文的范围。 查看Vue文档中的注意事项列表。

    与jQuery和其他库一起工作

    Vue与jQuery,Underscore或任何其他流行JavaScript实用程序库不冲突。 但是,对于尝试将Vue与其他JavaScript 框架(如React)一起使用,您应该三思而行。

    除了Vue之外,您可能不一定需要 jQuery,但是您可能希望在应用程序的其他未由Vue呈现的区域中使用它。

    Vue还提供了与其他库集成的“挂钩”,例如执行动画。

    使用Babel或其他翻译器

    Vue不需要Babel来提高您的生产力。 但是,Babel将允许您使用JavaScript的一些最前沿的规范功能,例如模板字符串和更复杂的数组操作技术。

    Vue不需要任何特殊的构建系统,这使习惯于编写少量JavaScript的面向设计的开发人员可以轻松访问Vue,同时仍具有足够的功能以集成到更复杂的构建系统和完整的单页应用程序中。

    在同一页面上多次使用Vue

    您不仅可以在同一页面上拥有多个Vue实例,而且甚至可以在同一页面上引用同一基础数据对象。 例如,在我们之前的数据列表示例中,如果我们JavaScript如下所示:

    var sharedObject = {
        items: []
    }
    
    let vm = new Vue({
    	el: "#app",
    	data: sharedObject
    })
    
    vm.items = [{text: "Diversity Day"}, {text: "Beach Trip"}]

    使用该模板的结果与我们之前的示例相同:

    <div id="app">
        <div v-for="item in items">{{item.text}}</div>
    </div>

    但是,我们还可以添加Vue的第二个实例,该实例引用相同的基础数据表示形式,如下所示:

    var vm2 = new Vue({
        el: "#app2",
    	data: sharedObject
    })

    然后,我们可以显示例如列表中的项目数:

    <div id="app2">
        <div>{{items.length}}</div>
    </div>

    当然,这可能不是所需的行为。 您可能想要创建两个不绑定到相同基础对象的组件,并且这些组件可以正常工作。

    如果要创建两个以同一基础对象开头的单独实例,则可以使用Object.assign方法创建同一对象的新副本。

    let vm2 = new Vue({
        el: "#app2",
    	data: Object.assign({}, sharedObject)
    })

    结论

    对于希望使用易于使用的轻量级框架,但又希望将来需要更强大的框架的开发人员来说,Vue是一个绝佳选择。 Vue将根据您的需求扩展。 了解如何在各种场景下使用Vue(并了解表面下发生的事情)将为您提供一个非常强大的工具集,从一开始就可以使您高效地工作。

    在下一个教程中,我们将通过查看Vue干净代码的一些示例,介绍Vue提供的更多独特价值。 到时候那里见!

    无论您是经验丰富的编码人员还是希望使用新的前端开发技术的网站设计师,都可以通过我们完整的Vue.js教程指南学习Vue.js。

    翻译自: https://webdesign.tutsplus.com/tutorials/how-to-get-up-and-running-with-vue--cms-29642

    vue 运行启动命令

    展开全文
  • vue 运行报错 -4058

    千次阅读 2018-12-12 19:55:57
    运行了半天的‘vue项目’,发现最后是小程序!!!!所以运行不起来!!! 这是vue项目的目录 这是小程序的目录 有点像,但是不太一样,要注意区分呦...

    运行了半天的 ‘ vue项目 ’ ,发现最后是小程序!!!!所以运行不起来!!!

    这个报错是说缺少 package.json 文件的意思,可以检查下项目里有没有这个文件

    这是vue项目的目录

    这是小程序的目录

    有点像,但是不太一样,要注意区分呦

    展开全文
  • ip地址访问vue运行项目

    千次阅读 2019-09-19 23:38:27
    ip地址访问vue运行项目 在未进行配置下,通过ip地址访问vue运行项目,是无法访问的。 vue项目想要通过ip地址访问运行项目,需执行以下操作。 1.查看本机IP地址。win+R打开cmd命令,输入ipconfig/all查看本机ip地址。...

    ip地址访问vue运行项目

    在未进行配置下,通过ip地址访问vue运行项目,是无法访问的。

    vue项目想要通过ip地址访问运行项目,需执行以下操作。

    1.查看本机IP地址。win+R打开cmd命令,输入ipconfig/all查看本机ip地址。
    2.修改package.json文件中添加–host 0.0.0.0,然后重新重启项目。

    "scripts": {
        "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    }
    

    3.在浏览器导航栏中输入:http://ip+端口访问项目运行,即http://192.168.42.122:8080/(我本机访问路径)。注意这里确保访问时时同一网段,否则,就无法访问。

    参考:
    https://jingyan.baidu.com/article/d2b1d102e22a6c5c7e37d4f5.html

    展开全文
  • vue运行后network的IP地址访问不了

    千次阅读 2020-10-07 16:18:29
    之前运行vue时network显示unavailable App running at: - Local: http://localhost:8080/ - Network: unavailable 经过查找解决了这个问题 在vue.config.js添加以下代码 module.exports = { configureWebpack: {...

    之前运行vue时network显示unavailable

    App running at:
      - Local:   http://localhost:8080/
      - Network: unavailable
    

    经过查找解决了这个问题
    在vue.config.js添加以下代码

    module.exports = {
      configureWebpack: {},
      devServer: { // 环境配置
        host: '0.0.0.0',
        public: '172.20.3.3:8080',
        port: '8080',
        https: false,
        disableHostCheck: true,
        open: false // 配置自动启动浏览器
      }
    }
    

    于是network有IP地址了,可是点击之后却无法访问

     App running at:
      - Local:   http://localhost:8080/
      - Network: http://172.20.3.3:8080/
    

    在这里插入图片描述
    经过搜索发现是IP地址搞错了也就是public: '172.20.3.3:8080',这一行代码
    怎么查看自己电脑IP地址呢?
    1、鼠标右击网络,点击属性
    在这里插入图片描述
    2点击更改适配器设置
    在这里插入图片描述
    3在网络连接窗口中双击打开正在使用的网络
    在这里插入图片描述
    4点击详细信息
    在这里插入图片描述
    查看IP地址
    在这里插入图片描述
    修改复制的之前别人的IP地址

    修改前:public: '172.20.3.3:8080',

    修改后:public: '192.167.101.19:8080',
    重新运行就可以正常访问啦

    展开全文
  • vue运行报错

    千次阅读 2020-05-12 13:59:21
    ERROR Failed to compile with 2 errors 10:03:54 This dependency ...vue&type=script&lang=js& To install it, you can run: npm install --save @/api/job/jobPractice 方法: 这是因为引入路径有问题,修改路径即可
  • Vue.js是一套构建用户界面的 “渐进式框架”。 Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。2016年,Vue同Angular、React形成三足鼎立的局面,...
  • 一、Vue+JavaScript需要项目npm run dev运行后自动打开浏览器(VueCli2) 1.1、版本说明 "vue": "^2.5.2" "vue-router": "^3.0.1" vuecli2 1.2、修改项目目录下/config/index.js文件,设置dev....
  • vue运行命令npm run dev问题的解决方法

    千次阅读 2020-04-16 14:55:24
    错误信息如下: “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “run” “dev” 网上查了好多,大多数让重装什么的... 5、运行npm run dev, Ok 应该没有问题了。
  • Vue运行失败 npm ERR! code ELIFECYCLE

    千次阅读 2019-11-25 18:00:51
    Vue运行异常 npm ERR! code ELIFECYCLE 导语:记一下关于Vue执行的时候报 npm ERR! code ELIFECYCLE 异常,之前都是新建的项目所以没遇到过这种异常情况,这次是因为从别人那git下来一个项目,运行的时候突然报异常...
  • ant-design-vue运行时切换主题

    千次阅读 热门讨论 2019-05-23 22:24:05
    安装并引入 ant-design-vue 按需引入antd 定制主题 提取antd的less变量文件 切换主题 项目地址 创建项目 可以参照https://vue.ant.design/docs/vue/use-with-vue-cli-cn/创建项目并引入ant-design-vue 1、...
  • vue运行项目时network显示unavailable

    万次阅读 2019-06-17 12:23:00
    vue-cli了一个项目,create以后,npm run serve时最终只有本地可以打开,但是网络上没有显示,network显示unavailable 一开始也是不知道什么原因,查了很旧,没办法了,继续试了下,最终发现原来是网卡原因(禁用...
  • Vue运行报错:missing script:dev

    千次阅读 2019-04-25 17:54:26
    终端执行 vue init webpack
  • 有关vue运行显示不出来的问题

    千次阅读 2018-11-13 20:40:15
    在学习vue框架的时候,我按照官网上的方式进行编程却无法显示出来,在进行app7的代码试验的时候。 因此,我进行排查,网上基本没有什么相关的信息,然后后来我才发现: 不能打空格! 这部分内容,我在v-bind的...
  • 在gitlable中下载了一个项目,使用HBuilder X打开,输入 npm run dev 时,报错:'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 如图: 是因为项目中无node_modules文件,需要进行...
  • 运行 npm install --dev @vue/component-compiler-utils@1.3.1 参考原文大佬链接 结果它继续报错应该是没人情况不同,不要慌我们继续 我这里报错,如图: 下边他给了错误提示 If you are using vue-loader@>=...
  • 从网上下载的一个vue项目,终端执行:npm run dev 时,报错如下图: 从上述报错中可以看到,需要安装webpack-cli 终端输入:npm install webpack-cli 然后执行:npm run dev 就OK!可以运行了!       ...
  • 问题:Vue运行时报错:ERROR Failed to compile with 1 errors ,浏览器报错:Cannot GET / 分享我遇到的问题的解决方法供大家参考! 今天在运行vue项目时,命令行出现报错如下: 浏览器访问返回如下报错,没...
  • 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...解决办法: 打开config文件夹下的index.js,将module.exports下的dev里面的host改为本机地址,在执行xxxx:8080即可 ...
  • 运行完 cnpm run dev 命令后可以通过localhost:8080访问。但是不可以通过IP访问。这时可以在package.json文件夹的scripts的dev选项添加 --host 0.0.0.0 “dev”: “webpack-dev-server --host 0.0.0.0–inline --...
  • Vue 运行报错解决

    万次阅读 2018-07-13 15:37:04
    报错类型: > music@1.0.0 dev F:\music\music > node build/dev-server.js > Starting dev server... ERROR Failed to compile with 2 errors14:30:11 ...npm install --save-dev vue-loader@11.1.4 //安装vue-loader
  • 出现:Node Sass could not find a binding for your current environment是因为项目中的sass依赖配置不是适合你的系统的,所以只要重新添加这个sass依赖就好了 进入在终端中进入到项目文件夹中,然后输入npm ...
  • atom配置vue运行环境

    千次阅读 2019-06-22 01:08:20
    在setting中查找插件“atom-terminal” 因为我们编写vue代码需要写很多对应的js代码,所以可以安装一个 插件 使编辑器对vue代码实现高亮提示。 最后按照提示运行项目即可。 ...
  • 我的天 这个大坑~ 神烦 百度馊了各种办法 不下一百个网页 最后发现是请求路径的错误 有说es6不兼容的,好那咱就试 对吧 安装polyfill 咱全局安装 代码污染就污染 后期再...寒假刚接触vue 爬了好多坑~ 
  • vue运行栈溢出

    千次阅读 2019-12-14 22:03:09
    控制台报错:ineffective mark-compacts near heap limit allocation failed 粗暴方法 package.json里的scripts修改"dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-...
  • vue运行时,出现warning:(Emitted value instead of an instance of Error) &lt;CarouselItem v-for="item in bannerlist"&gt;: component lists rendered with v-for should have explicit keys...
  • vue项目运行不成功

    千次阅读 2019-08-12 12:05:55
    第一次遇到 npm run dev 运行vue项目 提示 最后在网上搜了搜说 可能是导入模块时的模块名大小写的问题,比如从npm安装的模块名字 是小写的,比如vuex ;那么导入的时候应该写成 import Vuex from 'vuex' 而...
  • VUE:教你如何运行vue项目

    万次阅读 2020-06-28 11:45:44
    运行项目 进行定位到项目的路径 进入项目之后安装依赖 npm install 安装成功后你会发现项目里多了个 然后 npm run dev 自动启动浏览器就会打开项目了 不自启打开localhost:8080 参考:...
  • 本地运行vue dist文件

    万次阅读 2019-08-08 16:33:33
    运行这个命令会在目录中生成一个dist文件夹 在服务器部署vue项目只需要把这个文件夹给后台就可以了 但是打包之后我们需要在本地先自测一下,下面就是踩过的一些坑: 静态资源路径问题——空白页面 解决方法: 打开...
  • PS C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin>... vue-element-admin@4.2.1 dev C:\Users\wangting\Desktop\assets_web_admin\assets_web_admin > vue-cli-service s...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 153,334
精华内容 61,333
关键字:

vue如何运行

vue 订阅