developer Vue

快速构建项目

Vue Router

Vue 官方推荐的路由

坑

传参

this.$router.push 和this.$route.params 头一次用容易忽略
param 传参用name:”” 不要用 path

  this.$router.push({
    // path:`/domain/regist`,
    name:"domain.regist",
    params:{
      id:this.searchText
    }
  })

代理

config/dev.env.js API

config/index.js

  '/api':{
    target: 'http://39.99.198.143/api',
    changeOrigin: true,
    pathRewrite:{
      '^/api':''
    }
  },
  '/apps': {
    target: 'http://47.113.87.58/apps',
    changeOrigin: true,
    pathRewrite: {
      '^/apps': ''
    }
  }

dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_BASE_API: '""'
})

引入外部js CDN

import npm package for develop
config external [vue-cli2,vue-cli3]
index.html add scripts
main js or App.vue import modules

add npm package

yarn add vue@2.6.11
yarn add vue-router@3.1.3

这里的版本要和index.html中一致

配置webpack打包处理

vue-cli2

build/webpack.base.conf.js

  externals:{
    'vue': 'Vue',
    'element-ui': 'ElementUI'
  }

vue-cli3

module.exports = {
  configureWebpack:{
    externals: {
      'vue': 'Vue',
      'element-ui': 'ElementUI'
    }
  }
}

注意：在上述代码中，’vue’: ‘Vue’ 对应形式为 key : value，其中 key 为项目中引用的名称，而 value 是库暴露出来的全局对象名。

注释import及Vue.use(xxx)

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'

Vue.config.productionTip = false

注：使用 eslint 规则的项目请不要注释 import 及 Vue.use，除非你不使用那烦人的 eslint。

index.html

    <script src="//cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>

https://blog.csdn.net/xuqipeter/article/details/80452271

webpack build

vue项目报错webpackJsonp is not defined

chunk 順序錯誤

Vue + Webpack3 升级全纪录

webpack3 ==> webpack4

create vue2 + webpack3 project

yarn add webpack-cli@3.3.11 --global 
yarn add vue-cli@2.9 --global 
vue init webpack {projectName}

upgrade webpack

yarn upgrade webpack@4.43.0  # 3 => 4

Upgrade Webpack

update Webpack 3 => 4

"webpack": "^3.6.0" => "^4.29.6"
"webpack-bundle-analyzer": "^2.9.0" => "^3.1.0"
"webpack-cli": "^3.3.0" (ADD)
"webpack-dev-server": "^2.9.1" => "^3.1.11"
"webpack-merge": "^4.1.0" => "^4.2.1"

Upgrade Loader

"css-loader": "^0.28.0" => "^2.1.1"
"file-loader": "^1.1.4" => "^3.0.1"
"inject-loader": "^3.0.0" => "^4.0.1"
"postcss-loader": "^2.0.8" => "^3.0.0"
"url-loader": "^0.5.8" => "^1.1.2"
"vue-loader": "^13.3.0" => "^15.7.0"
"vue-style-loader": "^3.0.1" => "^4.1.2"
"vue-template-compiler": "^2.5.2" => "^2.6.9"

Upgrade Plugin

"copy-webpack-plugin": "^4.0.1" => "^5.0.1"
"friendly-errors-webpack-plugin": "^1.6.1" => "^1.7.0"
"html-webpack-plugin": "^2.30.1" => "^3.2.0"
"optimize-css-assets-webpack-plugin": "^3.2.0" => "^5.0.1"
"extract-text-webpack-plugin": "^3.0.0"  (DEL)
"mini-css-extract-plugin": "^0.5.0" (ADD)

Upgrade eslint

"eslint": "^4.15.0" => "^4.19.1"
"eslint-config-standard": "^10.2.1" => "^11.0.0"
"eslint-friendly-formatter": "^3.0.0" => "^4.0.1"
"eslint-loader": "^1.7.1" => "^2.0.0"
"eslint-plugin-import": "^2.7.0" => "^2.12.0"
"eslint-plugin-node": "^5.2.0" => "^6.0.1"
"eslint-plugin-promise": "^3.4.0" => "^3.7.0"
"eslint-plugin-standard": "^3.0.1" => "^3.1.0"
"eslint-plugin-vue": "^4.0.0" => "^4.5.0"

upgrade complete package.json

yarn add mini-css-extract-plugin -D  # extract-text-webpack-plugin ![see](https://webpack.js.org/plugins/extract-text-webpack-plugin/)

yarn upgrade html-webpack-plugin -D 
yarn upgrade webpack-bundle-analyzer -D
yarn add 

extract-text-webpack-plugin

see

yarn add mini-css-extract-plugin -D

安装babel-plugin插件转换es6代码

再次执行npm run dev，发现之前的报错消失了。项目似乎已经可以正常运行了。但，打开项目地址一看，一片空白。F12控制台一样，鲜红的报错

Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#

DeprecationWarning

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks

好多都建议更新extract-text-webpack-plugin插件，但webpack4已经不建议使用该插件，所以可以下载mini-css-extract-plugin插件代替
如果仍然报错

//webpack.base.conf.js最上面添加如下代码
process.traceDeprecation = true
//然后运行npm run dev/npm run build,查看哪个node_modules需要更新

UI

Vuetify

import variables scss

no v-application–wrapper styles import

because use css-loader version> 3.4.0

## VS CODE 之 vue.json 用户代码片段不生效

CTRL+SHIFT+p 设置setting.json

    // html颜色高亮
    "files.associations": {
        ".eslintrc": "json",
        "*.vue": "vue" ,// 有些被设置为html ,而新版vetur 增加vue 类型
    },

Vue,Vuex,Webpack...

踏坑笔记