精华内容
参与话题
问答
  • vue项目打包步骤

    万次阅读 多人点赞 2018-06-25 01:04:39
    vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变,如下图:点击index.html,通过浏览器运行,出现以下报错,如图:那么应该如下修改呢?具体步骤如下:1、查看package.js文件的scripts命令2、打开...

    vue项目打包

    一、终端运行命令 npm run build

    二、打包成功的标志与项目的改变,如下图:

    3、点击index.html,通过浏览器运行,出现以下报错,如图:

    四、那么应该如何修改呢?
    具体步骤如下:
    1、查看package.js文件的scripts命令
    2、打开webpack.dev.conf.js文件,找到publicPath: config.dev.assetsPublicPath,按Ctrl点击,跳转到index.js文件
    3、其中dev是开发环境,build是构建版本,找到build下面的assetsPublicPath: '/',然后修改为assetsPublicPath: './',即“/”前加点。
    4、终端运行 npm run build 即可。

    此时点击index.html,通过浏览器运行便,会发现动态绑定的static的图片找不到,故static必须使用绝对路径。将图片路径修改为绝对路径,至此,打包完成。

    五、温馨提示

    更多博文,请关注:xssy5431 【小拾岁月】

    扫码:

     

    展开全文
  • vue入门——通过webpack构建vue项目

    千次阅读 2019-01-25 20:04:04
    本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue. 在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是...

    简介:

    本篇主要介绍如何通过webpack构建一个简单的vue项目,不涉及vue的安装,如果没有安装vue的话,请先安装vue.

    在使用vue的时候,通常有两种方式,一种是在html中引入vue.min.js,利用vue的语法规则进行开发。另一种是通过webpack构建vue工程(不知这样描述是不是准确),本篇将对该方法展开叙述(前提安装了vue):

    步骤

    1、建立项目路径。首先建立一个项目路径(我的位于D:\Program Files\vueProject),尽量不要放在c盘,打开命令行窗口,将路径切换到工作路径中。

    2、输入vue init webpack demo,建立项目。其中demo使我们要建立的项目名称,当脚本执行时,会继续进行确认。如下图,其中的一些乱码我也不知道是什么原因。

    接下来就是确认项目描述信息,作者信息,这个根据个人喜好,填写吧。Vue build选择默认的,vue-router选择yes(如果不选择,则无法使用vue的路由功能,有关路由功能的参考vue路由详解,个人觉得这块还是比较重要的)

    下面的内容应该是有关js语法检测的内容,直接输入n就可以,暂时用不到。然后按enter,直到开始安装。

    出现以下内容,表示已经正确安装。

    根据提示信息,切换到demo目录下,然后执行npm run dev。编译并启动我们的项目

    在浏览器中输入访问的网址,访问界面表示已经正确配置

    至此,项目已经成功构建,在下一篇内容中,我们将对生成的文件进行简单的说明。

    展开全文
  • vue 关闭vue项目中烦死人的ESlint

    万次阅读 多人点赞 2018-04-04 11:44:51
    【已解决】vue 关闭vue项目中烦死人的ESlint 很多时候,因为一些书写问题,ESlint会报错。

     

    ——问题——

    每次都红我缩进,

    每次都要改,太麻烦了

     

    ——解决——

    最好的办法就是创建项目的时候不要ESlint

     

     

    其他办法

    1.关闭软件webstorm 的ESlint

    file->settings->搜索ESlint->取消Enable的勾选

     

    2.注释掉项目内的ESlint

    项目目录下build.js->webpack.base.conf.js文件里面有段代码  注释掉!!!

     

     

    好了!特别清爽的感觉!

    温馨提示:ctrl+alt+L可以规范webstorm中的格式哦~让那个比教导主任还严的ESlint滚粗

    展开全文
  • VSCode配置启动Vue项目

    万次阅读 多人点赞 2018-03-30 11:04:07
    注意:这个是1.2版本的配置,现在1.3版配置已经不是这样了 ...该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置...

    注意:这个是1.2版本的配置,现在1.3版配置已经不是这样了

    下载安装并配置VSCode

    随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。

    1、vetur插件的安装

    该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置

    "emmet.syntaxProfiles": {
      "vue-html": "html",
      "vue": "html"
    }

    2、eslint插件的安装

    eslint智能错误检测插件,在具体开发中作用很大,能够及时的帮我们发现错误。至于安装,同样打开插件扩展窗口输入eslint点击安装插件,装好后也需要进行配置,在同vetur插件一样的地方进行配置

    "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            "vue"
        ],
    
     "eslint.options": {
            "plugins": ["html"]
    }

    vetur和eslint插件在配置中如下图所示 
    这里写图片描述

    导入项目并编译

    1、导入项目

    从github上下载vuestic-admin项目(https://github.com/epicmaxco/vuestic-admin.git),拉到本地后打开VSCode直接文件->打开文件夹 导入项目,Ctrl+shift+Y呼出控制台,在控制台终端输入npm install添加包依赖 
    这里写图片描述
    如果没有安装npm请先安装npm。

    2、运行项目

    同样在终于执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了。 
    这里写图片描述

    展开全文
  • 搭建VUE项目(三)VUE项目实现页面跳转

    万次阅读 多人点赞 2018-06-27 10:26:17
    打开一个VUE项目,目录结构是这样的:如现在有两个页面aaa和HelloWorld,路由配置在index.js中:import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import ...
  • vue项目实战】Vue工程化项目--猫眼电影移动端

    万次阅读 多人点赞 2019-04-16 13:42:46
    使用 vue-cli 创建项目。现在先把主框架搭起来,熟悉路由和组件,后面在 项目demo 持续贴出完整项目代码。 vue初始化项目 首先全局安装Vue脚手架——vue-cli npm/cnpm install vue-cli -g 新建一个文件夹vue-demo...
  • Vue 使用Vue-CLI4 创建Vue项目

    万次阅读 2019-11-07 10:23:31
    vue create 项目名称 选择手动配置(如果喜欢使用eslint可以选择默认) 键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以有三个。 取消eslint(Linter) 下一步默认 是否保存模板(预设...
  • vue项目如何刷新当前页面

    万次阅读 多人点赞 2018-05-27 11:19:33
    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...Dialog 对话框设置的数据可以在确定...
  • 虽然对项目无影响,但是看到有红的还是不舒服。 于是查了一下发现可以这样解决 在你引入VueRouter的时候再加上一句话: const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push...
  • vue项目中使用pdf.js预览pdf文件

    万次阅读 多人点赞 2018-05-02 20:44:06
    项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs的朋友! 其实 这和前端...
  • 用webstorm搭建vue项目

    万次阅读 多人点赞 2018-04-15 21:25:47
    本文只针对新手。 首先要明白几个名词(概念)。 Node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。...
  • 关于vue项目的seo问题

    万次阅读 多人点赞 2018-03-21 08:43:21
    但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前后端分离开发么? 首先,可以肯定的是...
  • vue项目环境搭建及一个简单的vue例子

    万次阅读 多人点赞 2018-03-22 18:11:36
    大家好,今天下午对于vue项目环境的搭建进行了研究,一直以来,我都是用cdn的方式将vue.js引入Html界面,然后就开始刷vue的官方文档了。在刷过文档之后,我就想着,真实的项目是怎么样子的呢,然后就开始了vue-cli...
  • vue项目访问顺序

    万次阅读 2019-08-20 16:53:12
    1.vue项目访问顺序 访问index.html后,main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。 2.mian.js(项目开始展示内容) import Vue from 'vue' import App from ...
  • nginx下部署vue项目概览

    万次阅读 2018-03-08 11:55:45
    今天要用到服务器nginx,还需要把自己的vue项目部署到服务器上去所以就写一下记录下来。首先要去nginx官网下下载nginx: 下载地址:https://nginx.org/en/download.html 下载下来会是一个解压包,解压到你想放...
  • Vue项目中实现用户登录及token验证

    万次阅读 多人点赞 2018-10-08 22:42:10
    在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下: 1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码 2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token 3、前端...
  • Linux服务器部署vue项目

    万次阅读 热门讨论 2018-09-09 20:32:52
    新建一个vue项目。 //详细的怎么创建。我这里就不说了。 vue init webpack vuetest 得到的项目目录 执行, npm run build // 进行打包操作 当最后看到这样代表打包成功 此时你可连接服务器。我这里用.....
  • vue项目中关闭eslint的方法

    万次阅读 多人点赞 2019-08-16 10:08:13
    vue-cli创建出来的项目中根本没有这些玩意。 方法 在项目根目录下增加vue.config.js文件。 内容如下: // vue.config.js module.exports = { lintOnSave: false } 完事。 转载链接: 添加链...
  • 方式是使用axios(进入项目根目录下,执行安装命令:npm install --save axios),(存在问题:会覆盖之前安装的UI,导致项目报错,可以先安装axios,再安装UI,不会出现报错情况) 语法格式: login() { //=...
  • 关于vue项目中搜索节流的实现

    万次阅读 2019-06-27 10:49:37
    我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是 根据防抖节流而实现的,至于用防抖还是节流根据自己需求。 <template> <input type="text" v-model.trim="sse">...
  • npm install -g @vue/cli # or yarn global add @vue/cli 查看版本(是否安装成功):vue -V(大写的V)   11576163-5ebc6d418467d0c4.png 2.命令变化 Commands: create [options] &lt;app-name&...
  • vue项目打包App

    千次阅读 2017-12-23 13:58:57
    本地的vue项目打包成App。这里以Hbuilder为例。首选命令行进入项目的目录执行 npm run build   打包成功之后再项目下回生成一个dlist 文件夹。在Hbuilder中导入dlist文件夹。选中项目右键选择转换成移动App。 ...
  • vue项目部署到nginx

    万次阅读 2019-05-26 17:09:15
    最近产品做了一半,要求将前端的代码部署到服务器,以前没有部署过,这可咋办呀~~。现在部署好了,给大家总结以下,里面还是有很多坑的
  • vue项目可视化管理之(vue ui)

    万次阅读 2019-06-24 18:16:22
    可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。 还可以查看运行依赖和开发依赖的以及在线安装和更新依赖,非常方便 任务按钮下,你可以运行项目、打包项目,检查等...
  • Vue.js教程-Vue项目的目录结构和.vue文件的构成

    千次阅读 多人点赞 2020-07-28 00:59:54
    Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...
  • Vue笔记——搭建脚手架并快速创建Vue项目

    万次阅读 多人点赞 2018-10-01 16:29:37
    现在的Vue脚手架已经升级到3.x版本,即vue-cli3。 脚手架升级之后,安装的命令发生了变化,所以这篇文章会跟大家演示新旧版本的脚手架安装过程。 下面的安装过程均是在window平台下安装。 一、准备工作 1. 安装node...
  • vue入门新建vue项目

    万次阅读 2017-04-14 09:58:54
    首先要安装好node.js,然后才可以用vue。 设置淘宝镜像:大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。  npm install -g cnpm --registry=https://registry.npm.taobao.org 这样...
  • 首先假如你已经安装了node和npm,如果没有的话自己百度安装一下。 如果感觉npm下载速度慢,可以使用淘宝镜像cnpm,链接地址: http://npm.taobao.org/ 安装cnpm 方式一: npm install -g cnpm --...npm --...
  • 项目中需要新下载一个插件,当时网络不是特别好,下载失败了,后来不知道怎么项目就跑不起来了。 运行cnpm install没问题,运行cnpm run serve就会报错: internal/modules/cjs/loader.js:583 [app-scripts] throw ...
  • VUE:教你如何运行vue项目

    万次阅读 多人点赞 2018-05-29 14:49:31
    -------------------------------------------从零开始安装首先下载安装node.jshttps://blog.csdn.net/wypersist/article/details/80492576运行项目进行定位到项目的路径进入项目之后安装依赖npm install 安装成功...

空空如也

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

vue项目

vue 订阅