精华内容
下载资源
问答
  • 安装Vue脚手架----教程前言安装Vue脚手架初识.vue文件编译.vue文件 前言 在之前我们都是通过在.html文件中编写vue的代码,在实际开发中并不会这么做。 正常项目开发中,如果要写样式,就可能不会用css了,你可能会用...

    前言

    在之前我们都是通过在.html文件中编写vue的代码,在实际开发中并不会这么做。

    正常项目开发中,如果要写样式,就可能不会用css了,你可能会用Less、Sass、Stylus(它们三者都是css的预处理技术)中的某一种。

    那几种样式文件写出来浏览器是不认识的,我们需要对其进行编译。这就需要用到前端自动化构建工具,比如说webpack。

    其次,我们在写css3的时候,css3的很多样式都有一个前缀,我们不可能记住每一个样式都加什么样的一个前缀,因此我们就需要依赖于这样的一个工具。

    还有就是javascript,js的代码肯定是要压缩的吧,代码要上线的时候,我们就要把js文件给压缩一下,这个压缩的过程也是需要使用工具的。

    还有就是es6,es6的语法浏览器都认识,谷歌对于es6的支持还是比较好的,但是有个别的es6的语法在浏览器中是不支持的,那这个时候我们就要使用工具了,用工具把它编译,编译成es5,那我们的浏览器不就认识了吗。

    所以说,我们想要写一个真正的项目需要依赖于很多东西。这些工具很多都集成在了webpack。我们使用webpack来搭建项目会省很多麻烦。

    但是在Vue里面,就需要自己去进行配置。

    因为Vue的官方给我们提供了一个脚手架。

    这个脚手架是内置了webpack,它都帮我们配置好了,我们可以拿过来直接用,使用它里面的配置就足够大部分的开发了,如果不够还可以自己手动配置。

    这个脚手架用起来肯定是比用webpack从0到1配置简单方便多了。

    安装Vue脚手架

    首先下载Node.js

    https://nodejs.org/en/

    查看node版本:

    node -v
    

    node-cli要求node版本要大于8.9

    如果之前安装过旧版本脚手架(非3.x),需要先卸载旧版本:

    npm uninstall vue-cli -g
    

    安装脚手架,用于生成项目:

    npm install -g @vue/cli
    

    携带参数-g代表全局安装,否则就是本地安装。

    安装中如果遇到问题,报错信息类似于:

    npm ERR! fetch failed https://registry.npmjs.org/xxx的问题

    我个人的报错信息是:npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/download-git-repo (over 30000ms)
    在这里插入图片描述

    解决办法:(使用淘宝源)

    通过config命令:

    npm config set registry https://registry.npm.taobao.org 
    
    npm info underscore (如果上面配置正确这个命令会有字符串response)
    

    在这里插入图片描述

    参考博客:使用NPM命令安装库时,遇到 npm ERR! fetch failed https://registry.npmjs.org/xxx的问题

    下载得很快,很稳定,真香。

    非常感谢这位博主!

    如果我们仅仅只想用到Vue的一个组件,又不想构建太多东西去生成一个项目,那我们就只使用如下命令,来进行快速原型开发,编译一个.vue文件,这个是比较快的。所以这个我们也安装一下。

    用于快速原型开发,编译.vue文件:

    npm install -g @vue/cli-service-global
    

    然后我们需要确定自己安装成功了,

    查看vue-cli版本:

    vue --version
    

    我所使用的vue/cli版本是4.3.1

    如果仍然需要使用旧版本的vue init 功能,可以全局安装一个桥接工具:

    npm install -g @vue/cli-init
    

    使用VSCode的话,本身它是不支持.vue文件的。(没有语法高亮提示)
    所以我们需要安装这么一个插件:
    插件名字:Vetur

    在这里插入图片描述


    初识.vue文件

    我们先来熟悉一下 .vue文件
    新建一个.vue文件:
    在这里插入图片描述
    每个.vue文件它代表一个组件。
    并且首字母大写,这是命名规范。

    .vue文件里都有什么呢?
    它有一个东西叫做 template ,英文单词意思是模板。
    它用来写组件的html文档结构,其实就是简化了我们在书写vue组件中的模板的过程。
    我们以前是这么写的:

    Vue.component('name',{
        template: `
          <div> I am a cmp </div>
        `,
    })
    

    现在就可以这样写了:

    <template>
        <div> I am a cmp </div>
    </template>
    

    除了template以外,还可以有script标签用来书写逻辑。
    script 书写时候自动生成了:

    <script>
    export default {
        
    }
    </script>
    

    默认导出一个对象。
    这个对象就是

    Vue.component('name',{
        template: `
          <div> I am a cmp </div>
        `,
    })
    

    的大括号中除了template之外的东西。
    例如:

    <script>
    export default {
        data(){
            return {
                msg: 'hello world',
            }
        }
    }
    </script>
    

    然后,还有一个标签:style,它用来书写css代码:

    <style>
    div {
        background-color: #008c8c;
    }
    </style>
    

    编译.vue文件

    利用windows命令行来执行编译命令,先进入到.vue文件所在路径。

    在这里插入图片描述
    在这里插入图片描述
    编译命令:

    vue serve xxx.vue
    

    注意你的.vue文件的名字是App,vue,那App,vue可以省略,直接写成:vue serve即可编译。
    如果你的.vue文件名字不是App.vue,就需要指定.vue文件的名称。
    在这里插入图片描述
    现在我们在地址栏输入:http://localhost:8080/
    在这里插入图片描述
    即可展示出我们刚刚写的组件。

    展开全文
  • 这个只是按照网上一个demo写的,不知道为什么编译vue的时候报错,PS:菜鸟一只,头回使用webpack 和 vue 我是想把vue文件编译到某某js中,所以和服务器上的dev不太一样 不知道为什么就是不好用
  • htmlvue-loader ...在其上方插入vue-loader ,以将其编译Vue组件。 ... module : { rules : [ ... , { test : / \. ( html | svg ) $ / , use : [ 'vue-loader' , 'htmlvue-loader'
  • 但是我是需要vue的代码去学习这款app的前端是怎样写的,这些html和js的代码不是我想要的,百度了一下,好像这些都是打包编译过的代码,所以我想问一下各位大神这个可以还原到原来的vue代码吗...

    前端小白一枚

    最近想模仿一款悬赏任务的app,从网上弄到了所谓的源码。

    后台是php,前端是vue。

    但是问题是,我打开来看后,只发现一些html、css和javascript的代码,并没有任何的vue代码和文件。但是我是需要vue的代码去学习这款app的前端是怎样写的,这些html和js的代码不是我想要的,百度了一下,好像这些都是打包编译过的代码,所以我想问一下各位大神这个可以还原到原来的vue代码吗?

    回答~~~~不行,底下我告诉你原因

    vue框架就是把js封装扩展了,执行时依旧要翻译成js标准代码,你这里面没有vue代码,说明你没有搞到源码,你可能只是下载了app然后改了一下后缀名,并把它解压缩了而已。

    而且,你有可能理解错了反编译的概念,反编译指的是实现逻辑,逻辑是不分语言的,比如反编译java类库,反编译出来的不是java代码是汇编代码,看的是这个参数传到了哪里,各个函数之间如何调用

    你要是想学如何写这种程序的vue代码的话,你要么去github,开源中国这种源码学习网,要么直接去vue官网,一般有简单的示例代码

    回答~~~~好的。非常感谢!

    回答~~~~您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://ip7890.com/askvip?utm_source=1146287632

    展开全文
  • webstrom编译.vue遇到的报错问题

    千次阅读 2018-08-17 16:23:24
    1.webstorm中.vue文件中写stylus,总是出现警告和错误,但不影响编译 解决方案1: 装个vue插件,idea 里面插件名:vue-for-idea 解决方案2: 新版本的webstorm(2012以上)可用下面的方式解决: &amp;amp;...

    1.webstorm中.vue文件中写stylus,总是出现警告和错误,但不影响编译

    这里写图片描述
    解决方案1:
    装个vue插件,idea 里面插件名:vue-for-idea

    解决方案2:
    新版本的webstorm(2012以上)可用下面的方式解决:

    <style lang="stylus" rel="stylesheet/stylus">

    2.不能在.vue文件中注释以及空格报错问题

    解决方案1:

    1.安装Vue 2 Snippets插件

    2.在settings.json中加入这个:

    "files.associations": {
        "*.vue": "html" }

    对,你没有看错,不是vue,是html

    3.然后,再去编辑窗口,看看效果:既有vue的提示,又能像普通html那样正确注释!

    解决方案2:

    修改文件
    这里写图片描述

    3.使用ES6的箭头函数写Vue组件提示错误

    这里写图片描述
    解决方法
    这里写图片描述
    这里写图片描述
    <script>改写成<script type="text/ecmascript-6">

    箭头函数:https://blog.csdn.net/wangxiaoxiaosen/article/details/77983148

    展开全文
  • idea 单独编译运行Vue代码

    千次阅读 2019-05-17 15:08:08
    1 安装node.js https://www.cnblogs.com/zhouyu2017/p/6485265.html 2 idea 安装 vue.js插件 3 idea 设置js版本 否则可能语法无法识别
    展开全文
  • Vue编译问题 ,如何将Vue打包好的.js.map 文件反编译成 .Vue文件
  • 这是不应该作为Vue模板编译的代码片段 已在报道 < html lang =" {{ app()->getLocale() }} " > < body > {{ something }} </ body > </ html > 在,报告的inline code无法正常工作。 ...
  • 本次直播将从 Vue 组件转 React 组件这样一个实际工程实践入手,向大家介绍基于编译、Babel、AST 分析如何做代码转化。 课程大纲 Babel 是如何工作的 AST 是什么 Vue 和 React API上的异同 解析 Vue 代码 转化 ...
  • vue编译后页面空白

    2020-05-21 17:10:08
    1、build->utils.js文件 2、build->webpack.prod.conf.js 3、config->index.js 4、router->index.js
  • 本文介绍了webpack编译vue项目生成的代码探索,分享给大家,具体如下: 前言 往 main.js 里写入最简单的 vue 项目结构如下 import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', ...
  • 编译后dist的vue 前端的工作做完了,然后是springboot的配置
  • 本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue ...
  • 2、electron-vue 编译后运行空白

    万次阅读 2018-03-13 20:31:52
    electron-vue开发环境运行正常,打包编译失败 解决办法 在.electron-vue/webpack.renderer.config.js注释如下代码即可 // nodeModules: process.env.NODE_ENV !== 'production' // ? path.resolve(__dirname,...
  • vue项目保存编译后内存溢出解决办法: webpack编译报错提示内存溢出: 这个报错的意思就是Node内存不足所导致的。我们都知道 Node 是基于V8引擎,在一般的后端开发语言中,在基本的内存使用上没有什么限制。 但是,...
  • 使用apicloud云编译vue项目

    千次阅读 2019-05-29 15:06:25
    小白第一次用apicloud云编译vue项目,如有不对,欢迎指出! 采用vue开发的移动端项目可以通过apicloud云编译成Android和IOS两种APP。 1. vue项目的build 在vue项目的根目录下找到package.json文件并打开: scripts...
  • vue css引用图片编译后路径出错

    千次阅读 2019-01-24 15:22:21
    编译后的文件目录是这样: 现在config index.js的build路径配置是这样: 问题描述: css 和js文件的编译路径都是正确的,/static/css/xxx.js这样 但是图片编译后的路径是 /static/css/static/img/xxx.jpg ...
  • 一个用于编译和捆绑Vue单文件组件的构建工具-Brendan McCabe vno的徽标设计第一个在Deno运行时环境中用于打包和捆绑Vue组件的构建工具特点Parser编译器Bundler Adapter Server Side Renderer(即将推出)概述Vue是一...
  • 主要介绍了Vue项目编译后部署在非网站根目录的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-tools编译

    2020-12-29 21:53:44
    vue-tools编译包,下载解压直接在谷歌导入
  • vue-devtools 编译安装

    2020-06-09 12:08:25
    vue-devtools 编译安装先从Github 拉源码编译 vue-devtools1. 安装`yarn`2. 安装项目的全部依赖2. 打包 vue-devtools 插件3. 安装 chrome 扩展(已解压状态)打包 `crx` 先从Github 拉源码 ...
  • Vue编译 从Babel / Sass / Stylus将Vue单文件组件中的块编译为JS / CSS。 为什么采用这种方法 我们希望在npm上发布.vue文件而不是转换的.js文件,因为在某些情况下首选.vue文件,例如vue-server-renderer可以从<...
  • vue-brunch, 为预编译单个文件Vue组件添加对早Brunch的支持 Vue Brunch为预编译单个文件Vue组件添加对早Brunch的支持。安装对于 2.x 支持,请使用主分支。npm install vue-brunch --save-dev对于 1.x 支持,请使用 1...
  • 如何编译一个vue项目

    千次阅读 2020-05-24 19:36:36
    2、编译项目 在项目所在目录,如下图所示文件夹下,打开cmd。 输入npm install 安装需要的依赖 npm install 输入npm run dev 让该项目运行起来 npm run dev 3、可能遇到的问题 1、无法访问远程仓库 可采用国内...
  • vue在线编译网址

    千次阅读 2020-05-18 22:35:36
    vue2.xx版本在线编译:https://template-explorer.vuejs.org/# vue3.xx版本在线编译:https://vue-next-template-explorer.netlify.app/#
  • vue项目拷贝到Windows电脑上运行报错 解决问题: 因为node_modules 不是源码,只是根据依赖装的 开发依赖和项目依赖在不同系统环境下的可执行文件是不一样的,node_modules存的可执行文件 所以不同环境下的...
  • vue编译后静态文件的访问

    千次阅读 2016-11-03 11:41:25
    npm run build会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就...
  • vue项目过大,引用的组件过多,当启动项目打包项目或者修改代码的时候会发现编译速度太慢,浪费时间,甚至每改一行代码都可能需要编译三十秒以上,所以必须要优化,这样是在浪费生命 如何优化? 百度或者谷歌,发现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,699
精华内容 32,279
关键字:

编译后的vue

vue 订阅