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 【小拾岁月】

扫码：



 

目录

1 问题

2 解决

2.1 创建项目避开ESlint

2.2 使用了别人模板，禁止Disable Eslient

2.3 使用了别人模板，卸载

2.4 其他办法

2.4.1 关闭软件webstorm 的ESlint

2.4.2 注释掉项目内的ESlint


温馨提示：ctrl+alt+L可以规范代码格式，比Eslient更是随性一定，适合非强迫症，让那个比教导主任还严的ESlint滚粗


1 问题

每次都红我缩进，

每次都要改，太麻烦了



 

2 解决

2.1 创建项目避开ESlint

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



好了！特别清爽的感觉！



 

2.2 使用了别人模板，禁止Disable Eslient



                   

 



2.3 使用了别人模板，卸载

说实话，以前我觉得Eslient很烦，

后来要维护别人的代码的时候，才发现Eslient很棒

最后的最后发现，理解Eslient的人，没有它也写得工工整整，不理解的朋友，全部代码都红都不会看一眼，伤害的只有自己

npm uninstall eslint --save

2.4 其他办法

2.4.1 关闭软件webstorm 的ESlint

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

 



2.4.2 注释掉项目内的ESlint

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



 

打开一个VUE项目，目录结构是这样的：



如现在有两个页面aaa和HelloWorld，路由配置在index.js中：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import aaa from '@/components/aaa'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    	path: '/aaa',
      name: 'aaa',
      component: aaa
    }
  ]
})

现在在HelloWorld中点击按钮跳转到aaa，在aaa中点击按钮也可以返回到HelloWorld:

1、HelloWorld:

<div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="go">点我跳转</button>
</div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '哈哈'
    }
  },
  methods:{
  	go(){
  		this.$router.push('/aaa')
  	}
  }
}
</script>

2、aaa:

<template>
	<div>我是aaa
	<button @click="back">点我返回</button>
	</div>
	
</template>

<script>
export default {
  name: 'aaa',
  /*data () {
    return {
      msg: '哈哈'
    }
  },*/
  methods:{
  	back(){
  		this.$router.push('/')
  	}
  }
}
</script>

 

 

 

Vue.js教程-Vue项目的目录结构和.vue文件的构成
前言
Vue项目的目录结构(Vue-cli3/4版本)
.vue文件的构成
Html区域(template)
script区域
export default区域
style区域
总结

前言

本章介绍vue项目的目录结构和一个.vue文件的三部分，分别是template、script和style。
上一篇文章说到为什么同样都是.vue文件，为什么存在于不同的文件夹下，下面先解释一下目录结构。
因为Vue属于单页面开发方式，构成这个页面的元素就是组件，各个小组件组成一个大组件，各个大组件组成这个页面，在实际操作中只需要刷新对应组件即可，节省了任务量。通俗一点解释就是：单页面作为一棵树的根结点，它的子结点就是大组件，子结点的子结点就是小组件，以此类推。

Vue项目的目录结构(Vue-cli3/4版本)


先看一下整体的目录，还是用上一篇的vue工程。




众所周知，源码都放在src文件夹里，其他的要么是配置文件，要么是项目里需要的相关依赖。


assets文件夹：经常有两个子文件夹，分别是CSS和icon(就是存图片的)。


components文件夹：顾名思义存的是组件，这种组件全是vue文件，但这里经常放的是能够在不同的项目中进行重复使用的组件，例如移动端开发的Tabbar，或者是PC端的左侧导航栏等等，在不同的项目中直接复制粘贴这个文件夹就能使用了，也是Vue组件化开发的一大特点，就是复用性高。


router文件夹：里面只有一个文件——index.js，里面可以配置路由，路由的两种跳转方式有hash和history，上篇文章里简要说了一下他俩最主要的区别，可以去看。代码可以照下面的方式去练习，我使用的是箭头函数，属于ES6中function的简便写法，后面会细说一下。path代表路径，redirect代表重定向，component代表在这个路径下出现的组件，属于组件化开发的直观体现。




store文件夹：这个文件夹是Vuex自动创建的，里面也有一个index.js，但这里默认有四个东西：

state： 存公用的一些变量，例如登录信息啥的。
mutations：其实就是methods，主要用于修改state里的数据。
actions：进行异步操作，但还是通过mutations里的function操作state，不能直接修改state。
modules：里面可以定义许多个module，每个module里也有state、mutations和actions，相当于一个小型的vuex，我是这么理解的，可以看大佬们的精细讲解。





view文件夹：就是存放大组件的，也就是构成这个单页面的最大子组件，里面也是vue文件。


App.vue：是vue文件，也就是这个项目的入口，经常配合router-view使用，router-view用于显示该路由对应的组件，相当于是给了一个显示组件的区域。




main.js：引入全局的一些东西，并初始化Vue，一般一个项目里只用初始化一个Vue，.$mount(’#app’)就是el : ‘app’，两者是同一个意思，只不过mount写在后面，el卸载大括号里面，都可以。一般自己后安装的插件想要全局使用的话都要在main.js进行使用，也就是Vue.use(插件名)，当然要先import，例如使用axios进行异步请求，但最好还是按需使用，不要全局使用，因为有些时候使用父传子或子传父就能够实现数据传递，这样只需要在大组件里使用即可达到目的。




.vue文件的构成

先创建一个vue文件，我创建的是Home.vue



Html区域(template)

template里面只能有一个div，如果还需要div，可以在这唯一的div里进行使用，但最外层必须用div包上。
该组件的所有代码都会写在这个区域内，如果使用子组件只需要先import再使用，如何引入和使用会在下个部分讲。

script区域

在这里写js代码。
先解决如何确定父子关系，如图：


先在script区域内引入该组件，具体路径根据你创建的组件位置进行引入，然后在export default中的components写上引入的组件，此时父子关系确定了，因为Tabbar这个组件是位于Home组件内，所以Home是父组件，在html区域内直接写上<子组件名>这样就能让子组件在父组件中显示了。

export default区域

意思是将这里的东西默认抛出，这样在别的组件中可以使用这些东西，也就是在别的组件中可以完全引入。
里面经常有五个常用的东西：

data：写法上面的图片有，具体的数据写在return里就行了，可以是数组、对象或者某个变量。
computed：意思是计算属性，经常用于监控自己定义的变量啥的，处理相关数据并返回一个结果，例如购物车的总金额啥的。
methods：就是一些方法，常见的是一些事件，向后台请求数据或传递数据，其实就是js的函数，这里可以定义多个函数。
watch：经常用于监控vue实例，或监控父组件中data中数据改变的状况，经常用于同步刷新。
components：就是引用子组件。



style区域

写Css的地方，因为存在复用的情况，所以这个区域被包含在这个组件中，一个组件移到另一个项目中可以直接使用，就不用自己写了。
好像也没别的了，还有就是用什么类型的Css，可以自己安装，例如sass啥的，都可以。

总结

主要是了解Vue的目录结构，如果哪里写的不全欢迎补充，也可以去看大佬们的博客进行学习，先了解每个文件夹都是干什么的，防止以后不好维护。
父子组件的传参和相关知识后面也会讲，先提一下混个脸熟就ok了。