vue mint-ui 项目常见报错问题与解决方法

Use

npm install -g vue-cli

vue init webpack projectname

测试时 ：

npm run dev

打包时 ：

npm run build

vue-router

1、配置 Router
用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 cnpm 安装

cnpm i vue-router -D

2、在 router.js 中引入所需的组件，创建 routers 对象

import Vue from 'vue'
import Router from 'vue-router'
import StartPage from '@/components/StartPage'
import Index from '@/components/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'StartPage',
      component: StartPage
    },
    {
      path: '/index',
      name: 'Index',
      component: Index
    }
  ]
})

3、路由使用

• 使用 映射路由

 <router-link to="/index"></router-link>

• 编程式导航

// 字符串
this.$router.push('/home/first')

// 对象
this.$router.push({ path: '/home/first' })

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

Notice

1 . 加上scoped说明该css只在该组件中生效。

<style scoped>
...
<style>

2 . vue项目打包之后图片等其他资源路径错误

解决方法：找到项目中的config包中的index.js文件

    assetsPublicPath: '/', 

    修改为

    assetsPublicPath: './', 

3 . vue项目控制台报出警告（ 关闭ESlint 语法验证 ）

解决方法：找到项目中的config包中的index.js文件

    useEslint: true,

    修改为

    useEslint: false,

问题描述 ：

✘ 13 problems (13 errors, 0 warnings)


Errors:
  6  http://eslint.org/docs/rules/semi
  2  http://eslint.org/docs/rules/no-multiple-empty-lines
  2  http://eslint.org/docs/rules/space-infix-ops
  1  http://eslint.org/docs/rules/no-trailing-spaces
  1  http://eslint.org/docs/rules/quotes  1  http://eslint.org/docs/rules/camelcase
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file.