vue 学习使用总结

学习资料:

前端开发环境搭建和VSCode插件配置超详细图解

官网

vue全家桶

1.环境配置

1.1 项目构建

vue init webpack 构建项目时，项目名称不能有大写字母,否则构建失败

1.2 ico 添加

1.2.1 build/webpack.dev.conf.js

devWebpackConfig.plugins 添加：

 new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon:'src/assets/logo.ico',//关键语句
      inject: true
    }),

1.2.2 build/webpack.prod.conf.js

webpackConfig.plugins 添加

 new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      favicon:'src/assets/logo_zj.ico', //关键部分
      ...
})

1.3 vue-cli脚手架关闭 eslint

编译报错 Expected space or tab after ‘//’ in …

原来eslint是一个语法检查工具，但是限制很严格，在我的vue文件里面很多空格都会导致红线(红线可以关闭提示)，虽然可以关闭，但是在编译的时候老是会跳出来，所以能关闭是最好的了。
关闭方法：在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则：

1.打开 build文件夹下面的webpack.base.conf.js;
2.找到下面这段代码，并将它注释掉：

const createLintingRule = () => ({
  // test: /\.(js|vue)$/,
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

1.4 sass引入

1.4.1 sass 安装使用 参考资料

npm install -s sass-loader
npm install -s node-sass

打开build文件夹下的 webpack.base.conf.js,在module.exports里的module，在rules添加如下配置：

{
  test:/\.sass$/,
  loaders:['style','css','sass']
}

在.vue文件中，修改style标签

<style lang="scss" scoped>

</style>

1.4.2 sass 使用报错 解决方案

scss-loader 用最新版本会打包失败，卸载uninstall重装仍无效，将版本调整至7.3.1 //“sass-loader”: “^7.3.1”

Module build failed: TypeError: this.getResolve is not a function at Object.loader 
//安装node-sass运行报错

“sass-loader”: “^8.0.0”，更换成了 “sass-loader”: “^7.3.1”

1.4.3 sass 使用

& 表示嵌套的上一级,示例：

ul{
    margin-bottom: 20px;
    & >li {
        margin-bottom: 0;
    }
  }

1.5 vue 打包图片路径不对问题

1.5.1. 解决方案

在 build/util.js 中添加 publicPath:’…/…/’

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',  //此处为添加部分
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

在config/index.js 内的build下, 将assetsPublishPath 改为’./’

1.5.2 引用elemntui 图标不显示

build/webpack.base.conf.js 内的module.rules 里面 修改

    {
        test: /\.(woff2?|eot|ttf|otf|woff)(\?.*)?$/,  //注意此处添加woff 
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

json 转对象
var obj =JSON.parse(string);

对象转字符串
var string=JSON.stringify(obj)

1.6 vue-cli构建的项目整合发布到tomcat接口服务器中

1.6.1.【修改index.js】

修改config目录下的index.js，将assetsPublicPath: '/'改为assetsPublicPath: ‘./’，注意，有两处，都要改，不然打包部署到tomcat上面访问是一片空白；还有一点需要注意的就是，webstorm起服务时，需要改回来，不然也是不行的

1.6.2【打包】

项目文件目录下运行命令：npm run build，将项目打包好，然后当前项目目录下有一个dist文件夹，该文件夹下有一个index.html和static文件夹

1.6.3【tomcat部署】

现在，在tomcat的webapps文件夹下以项目名称新建一个文件夹，比如my_app，然后将index.html和static文件夹复制到my_app文件夹下，现在就可以启动服务器了，访问正常。

2.路由

2.1 index.html --主页，项目入口

页面内容为:<div id="app"></div>
上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上

2.2 App.vue --根组件

helloworld.vue中的内容能在app.vue中显示, 首先在index.js配置了路由路径,在main.js中加载了路由,在app.vue指明了路由显示位置<router-view>标签.

2.3 main.js --入口文件

主要作用是初始化vue实例并使用需要的插件
创建vue实例，挂载到 index.html 的#app 节点上

挂载方式:

1. el官方解释：为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数
2. components:代表组件。这里的App，实际是App:App的省略写法，template里使用的 标签来自组件App
3. template：代表模板。官方解释：模板将会替换挂载的元素。挂载元素的内容都将被忽略

$router

页面跳转：
//本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录
$router.push({path:‘home’});

//替换路由，没有历史记录
$router.replace({path:‘home’});

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。
$route.params
对象，包含路由中的动态片段和全匹配片段的键值对
$route.query对象，包含路由中查询参数的键值对。例如，对于/home/news/detail/01?favorite=yes，会得到$route.query.favorite == ‘yes’ 。
$route.router
路由规则所属的路由器（以及其所属的组件）。
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。

//(1)---- el 方式----

const app = new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

//(2)---- mount 方式----

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

2.4 route/index.js --路由配置

路由中有三个基本的概念 route, routes, router。

1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。

2. routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3. router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4. 客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

vue中使用路由时要把路径和组件对应起来，然后在页面中把组件渲染出来
资料来源

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

3.事件

$mount:将扩展挂载到dom上

逐步完善

//-----示例1-----

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

//-----示例2----
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

今日学习:
计算属性：computed
Class与Style绑定
:class="{}"
:style="{color:’’,font:10px,}"

组件中的data必须为函数

父子组件信息传递：

props down/events up

子组件需要显式地用 props 选项 声明 “prop”

{
data(){},
props:[],
methods:{}
}

4.定义全局变量/函数

参考资料

4.1. 全局变量

设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。

创建Global.vue文件：

<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite="中国钓鱼岛";
  export default
  {
    userSite,//用户地址
    token,//用户token身份
    serverSrc,//服务器地址
    hasEnter,//用户登录状态
  }
</script>

使用方式1:

import global_ from '../../components/Global'//引用模块进来
export default {
 name: 'text',
data () {
    return {
         token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
        }
    }
}

使用方式2：

import global_ from './components/Global'//引用文件
Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

在整个项目中不需要再通过引用Global.vue模块文件，直接通过this就可以直接访问Global文件里面定义的全局变量

<template>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: 'text',
data () {
    return {
         token:this.GLOBAL.token,//直接通过this访问全局变量。
        }
    }
}
</script>
<style lang="scss" scoped>
</style>

4.2 全局函数

原理
新建一个模块文件，然后在main.js里面通过Vue.prototype将函数挂载到Vue实例上面，通过this.函数名，来运行函数

1. 在main.js 里直接写函数

Vue.prototype.changeData = function (){//changeData是函数名
  alert('执行成功');
}

this.changeData();//直接通过this运行函数

2. 写一个模板文件

base.js文件，文件位置可以放在跟main.js同一级，方便引用

exports.install = function (Vue, options) {
   Vue.prototype.text1 = function (){//全局函数1
    alert('执行成功1');
    };
    Vue.prototype.text2 = function (){//全局函数2
    alert('执行成功2');
    };
};

import base from './base'//引用
Vue.use(base);//将全局函数当做插件来进行注册

调用方式：

this.text1();
this.text2();

$prompt element 弹窗

5 常用框架

5.1 必备

vuex vue的状态管理模式

5.2页面：

iview
element-ui

vue-gridlayout 页面格网布局

5.3 常用工具

5.3.1 form-create 表单生成器，根据json，自动生成表单

5.3.2 mockjs 生成随机数据，拦截 Ajax 请求

资料
源码