vue学习宝典（err && warning）

1. 修改打包映射

由原来的webpack进行打包换成其他的类似于npm run build 的打包命令。
在package.json中的script中添加如下命令：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },

2. css-loader

只负责将css文件进行加载

3. style-loader

负责将样式添加到DOM中。
【使用多个loader从右面往左引入】

4.TypeError: this.getResolve is not a function

css-loader 和 style-loader版本问题；

解决方法：
npm install style-loader --save-dev@3.6.0
npm install --save-dev css-loader@3.6.0

5.加载图片

npm install --save-dev url-loader
当加载的图片，小于limit时候，会将图片编译成base64字符床形式
当加载的图片，大于limit时候，使用file-loader，此时仍然会显示
找不到图片位置，原因是打包后的图片在dist文件夹中，解决方法就是
在webpack.config.js文件中。output下面加上publicPath:‘dist’

对打包图片进行命名

在url-loader中的options中添加name属相：
{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 81920, //图片命名 name:'img/[name].[hash:8].[ext]' }, } ]},

###6. 转Es5 Couldn’t find preset “@babel/preset-en” relative to directory
原因是，我们安装的是 “babel-preset-es2015”，所以要将这块的配置中的presets中改成“es2015".

7 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方法：在webpack.config.js中添加如下代码：

8 .vue文件加载

npm install --save-dev vue-loader vue-template-compiler
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
解决方法，将vue-loader 改成14以下的版本

9 extensions:[’.js’, ‘.css’, ‘.vue’],

在配置中添加上述代码可以实现import 文件后不需要添加后缀名。

10 打包html文件

npm install html-webpack-plugin@3.2.0 --save-dev

11 js 压缩的plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

12 webpack-dev-server 搭建的是开发时的动态刷新服务器

测试服务器

13配置的分离与合并

合并：
npm install webpack-merge --save-dev
错误：TypeError: webpackMerge is not a function
解决方法：webpackMerge.merge()就可以了;这个不是函数而是一个对象，所以调用里面的函数就行了。

14 vue-CLI脚手架的使用

vue-cli2的使用：
vue init webpack 项目名称

15 runtime compiler /only

runtimeonly:效率更高;代码更少

16 vue-cli2 vs vue-cli3

vue-cli2创建项目：vue init webpack 项目名称
vue-cli3创建项目： vue create 项目名称

17 添加个人配置 vue.config.js

18 箭头函数中的this的返回值：

结论：向外层作用域中查找，一层层查找this，直到this有定义。

19 vue-router 使用

第一步：创建路由组件
第二步：配置路由映射：组件和路径映射关系
第三步：使用路由：通过和标签进行显示

配置路由的默认路径

在router中添加：
{ path:'/', //redirect 路由重定向 redirect:'/home' },

20 将hash编程history

http://localhost:8080/#/home =》http://localhost:8080/home
与router同级中添加如下代码：
mode = ‘history’

21 代码的懒加载

在路由中进行如下配置：

const Home = ()=> import(’…/components/home’)
{
path: ‘/home’,
name: ‘home’,
component: Home
},

22 webpack引入vue注意点：

1. 所有需要的包：

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-runtime": "^1.0.7",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "copy-webpack-plugin": "^5.0.5",
  },
  "dependencies": {
    "vue": "^2.6.10"
  }

加入package.json后，使用npm install 自动安装

2.ue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config

这个错误一般会指定在你的vue组件中，其实并不是组件的代码错误而是队医vuo-loader v15版本需要另一个依赖。
你可以重新装一个14的版本，或者
直接在webpack.config.js中添加如下代码：

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {

  plugins: [
    new VueLoaderPlugin(),  
  ]
};

3 代码的覆盖问题：发现index.html文件没有显示，而是显示了组件里面的内容，不是路由的问题，而是代码覆盖：new Vue({

  el:'#app',
  // 添加下面一行，会使得home.vue组件覆盖原有的index.html模板。
  // template:'<Home/>',
  components:{
    Home
  },
  data:{
    message:"zhanghsang"
  },
})

注释中已经写明，所以，直接除掉这一块内容就可以了。