精华内容
下载资源
问答
  • Vue 反编译问题 ,如何将Vue打包好的.js.map 文件反编译成 .Vue文件
  • # 提示如下的错误!... 这是我有的所有的依赖 ...这个只是按照网上一个demo写的,不知道为什么编译vue的时候报错,PS:菜鸟一只...我是想把vue文件编译到某某js中,所以和服务器上的dev不太一样 不知道为什么就是不好用
  • 安装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/
    在这里插入图片描述
    即可展示出我们刚刚写的组件。

    展开全文
  • 1.webstorm中es6语法报错,解决方法... Javascript把 Javascript Language version 改为 ECMAScript 6这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错。 2. .vue文件中es6语法报错(1)打开 Settin...

    1.webstorm中es6语法报错,解决方法:

    打开 Settings => Languages & Frameworks => Javascript
    把 Javascript Language version 改为 ECMAScript 6

    这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错。

     

    2.  .vue文件中es6语法报错

    (1)打开 Settings => File Types 找到 HTML 添加 *.vue

    这样vue文件就相当于html文件,可以编辑css,js,也都有智能提示。但是,在.vue文件中es6语法还是报错。

    (2).粗暴:直接在<script>标签中添加type="text/ecmascript-6",.vue里面的代码会高亮并支持ES6。

    (3).将script标签添加 type=”es6” 属性

    <script type="es6">
    </script>

    然后打开 Settings => Language Injections 添加 XML Tag Injection,内容如下图。

     

     3.补充新功能:右键新建时出现.vue文件类型,就像新建html文件一样,方法:

    Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容。

    点击OK 返回,在项目中新建会出现vue文件 webstorm配置新建vue文件完成。

    展开全文
  • 使用apicloud云编译vue项目

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

    小白第一次用apicloud云编译vue项目,如有不对,欢迎指出!
    采用vue开发的移动端项目可以通过apicloud云编译成Android和IOS两种APP。

    1. vue项目的build
    在vue项目的根目录下找到package.json文件并打开:
    在这里插入图片描述
    scripts下对应的是运行的命令。比如npm run test-apicloud,表示打包的vue项目连接测试环境(打包后的代码会放在根目录下的dist文件夹中)。
    在根目录下打开cmd,输入:npm run test-apicloud,成功结果如下图:
    在这里插入图片描述

    2. 提交打包后的vue项目
    进入dist目录中,提交代码到apicloud账号下对应的应用(测)下
    在这里插入图片描述
    在这里插入图片描述
    3. apicloud云编译
    登录自己的apicloud账号,在对应的应用(测试)下,进行云编译刚提交的代码,云编译完成后会出现APP下载的二维码,手机扫描下载后安装即可。
    在这里插入图片描述

    展开全文
  • vue-running在线运行 .vue文件

    千次阅读 2020-06-07 19:56:45
    在线运行 .vue文件,支持element-ui、iview。 参考iview-run 用到了iview split面板分割组件、vue-codemirror插件 实现方法 使用了vue的构造器extend与手动挂载$mount 将代码进行切割(html,js,css) extend ...

    vue-running

    在线运行 .vue文件,支持element-uiiview

    参考iview-run

    用到了iview split面板分割组件vue-codemirror插件


    实现方法

    使用了vue的构造器extend与手动挂载$mount

    • 将代码进行切割(html,js,css)
    • extend 构造的实例通过$mount 渲染后,挂载到了组件唯一的一个节点上。(new Function,extend, $mount
    • 组件销毁时,手动销毁 extend 构造的实例及style(为便于销毁,添加随机 id 用于标识)。

    代码功能

    菜单功能

    新增菜单功能,用于存储代码。

    项目下的src/components/codeList下,存放自己的代码文件。会自动生成对应的目录,支持多层级目录。

    ├── element
    │   ├── select1.js
    │   ├── table-form.js
    │   └── test
    │       ├── rr
    │       │   └── jj.js
    │       └── testone.js
    ├── iview
    │   └── test.js
    ├── index.js   //配置 
    └── template.js 
    
    WeChatdd68b41612a4a1c76ac3d21b40d81182

    图标配置

    src/components/codeList/index.js,可以添加图标

    例子如下

    let iconList = {
      template: "ivu-icon ivu-icon-logo-vimeo",
      "element/": "el-icon-eleme",
      "iview/": "ivu-icon ivu-icon-logo-vimeo"
    };
    

    Key:是路径。value:图标

    为了使用两个ui组件的图标。

    目录的图标使用的是<i :class="iconList[item.name]" />

    所以iview的图标需要这样写ivu-icon ivu-icon-*******

    问题记录

    • 1. 路由参数重含有/

    想以文件的路径当路由参数(含有/,例如:a/b/c),但是路由解析不了。

    所以,用了encodeURIComponent来解决。

    • 2. 解决嵌套使用codemirror时,点击才会显示的问题。
    created() {
      setTimeout(() => {
        this.$refs.mycodemirror.codemirror.refresh();
      }, 1);
    }
    
    • 3. github pages 路由问题

      https://xiaolannuoyi.github.io/vue-running/template刷新后是404。

      修改路由模式为hash

    Github pages原生不支持单页面应用,没有为前端路由提供支持,并且为了安全,也不支持自定义后台配置。因此,我们没办法直接配置服务来fallback我们的应用。

    参考链接

    github地址

    项目演示地址1

    项目演示地址2

    展开全文
  • 优化 Vue 项目编译文件大小

    千次阅读 2018-07-14 10:57:49
    转载自 优化 Vue 项目编译文件大小与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,...
  • vscode编译vue.js

    2017-12-27 09:44:00
    vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天哪。...
  • vue-cli3 编译打包文件的压缩优化

    千次阅读 2020-04-26 21:20:12
    相比于vue-cli2,vue-cli3隐藏了很多默认的webpack配置,没有vue-cli2那么一目了然。但是都提供了各部分的修改路口,可以仔细研读下官方文档。vue-cli3官方文档 真的,如果真的不是业务需要,真的不会去仔细研读官方...
  • happypack 多线程编译 vue-loader

    千次阅读 2019-09-19 10:24:51
    基于vue-cli 2 版本 //在webpack.base.conf.js 中添加即可 plugins: [ new HappyPack({ id: 'happy-babel-js', loaders: ['babel-loader?cacheDirectory=true'], threadPool: happyThreadPool, ...
  • 用vue手脚架生成项目后,修改.Vue文件后,直接保存编译报一大堆错误,解决办法如下: 显示错误截图如下: 因为直接用vue脚手架初始化创建项目,会选择是否选用eslint语法检查,选择了之后,修改.vue文件报以上截图...
  • vue编译JS文件过大的优化方案

    千次阅读 2019-10-15 14:14:24
    这里我针对vue-cli 3.0来讲解,首先 npm i webpack-bundle-analyzer –save-dev 然后 vue.config.js 进行配置 const BundleAnalyzerPlugin = require ( 'webpack-bundle-analyzer' ) . ...
  • vue编译打包本地查看index文件

    千次阅读 2017-09-19 15:04:43
    vue编译打包本地查看index文件/build/config/index.js assetsPublicPath: ‘./’(编译出来可以本地查看,‘/’没有点的就直接发布到线上)
  • 1、流程 2、参考文章地址 https://segmentfault.com/a/1190000012336392 3、Vue框架的parseComponent https://github.com/...
  • 之前写的三篇文章,分别简单介绍了如何配置 webpack 完成 es6 代码编译、PostCSS 代码编译、以及 使用 webpack 管理资源文件。接下来将配置 webpack 完成 vue 代码的编译。 版本说明 本文使用的 webpack 的版本为:...
  • -- my-component.vue --> <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my...
  • 安装相关依赖包: npm install --save-dev image-webpack-loader ...然后,在vue.config.js里进行配置(这里附带了上篇文章中ie11兼容es6的处理方法): const CompressionPlugin = require("compr...
  • vue编译后静态文件的访问

    千次阅读 2016-11-03 11:41:25
    npm run build后会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就...
  • 以前的工程是编译成功的,我又重新弄了一个项目(重新按照vue的模板安装的依赖),结果死活不认识,提示 Module build failed: Error: Failed to find '~normalize.css/normalize.css', normalize.css这个模块...
  • webstorm中.vue文件中写stylus,总是出现警告和错误,但不影响编译。单独的.styl文件不会报错。 ![图片说明](https://img-ask.csdn.net/upload/201705/19/1495163469_814566.png) webstorm版本2017.1.2 packpage....
  • 上週在 Vue 社群圈有個令人興奮的熱門新聞: CodePen 可以支援.vue檔案了! Check it out - you can use `.vue` files in CodePen Projects easily:...
  • vue-devtools 编译安装

    2020-06-09 12:08:25
    vue-devtools 编译安装先从Github 拉源码编译 vue-devtools1. 安装`yarn`2. 安装项目的全部依赖2. 打包 vue-devtools 插件3. 安装 chrome 扩展(已解压状态)打包 `crx` 先从Github 拉源码 ...
  • 单独运行Vue文件

    千次阅读 2020-04-13 16:58:29
    场景:想单独运行某个Vue文件,不依赖src,类似运行单独的HTML文件 1.安装vue serve 2.运行 npm install -g @vue/cli-service-global 3.安装完成之后cd到需要单独运行的Vue目录下,执行 vue serve XXX ...
  • vue.js编译时给生成的文件增加版本号 vue.js在生成相关js和css文件的时候,名称是通过HASH的方式进行生成的,但是每次生成的文件基本都是一样的,那么浏览器就会缓存这些文件,为了在更新的时候能够保证js和css文件...
  • 报错如下: ... in ./src/App.vue ✘ http://eslint.org/docs/rules/indent Expected indentation of 2 spaces but found 1 E:\myapp\myproject\src\App.vue:11:2 data () {   ^ ✘ 1 problem (1 e
  • 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1、vue-loader做了什么? vue-loader是一个webpack加载器,这是vue组件的格式: &lt;template&gt; .....
  • Vue 原生支持在浏览器中直接运行 .vue 文件,这才符合“渐进式框架”的定位!webpack 学不好或者不想学或者嫌麻烦,就可以使用插件在浏览器中直接编译运行 .vue 文件!这样...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,685
精华内容 20,274
关键字:

在线编译vue文件

vue 订阅