vue-cli集合elementUI,sass,echarts,jquery，拖拽排序，国际化等

Posted 2021-04-08 web前端开发者们

1. 每次搭环境总会遇到 莫名其妙的问题：

   node.js官网安装，win+r,node -v,npm -v检查没问题,安装淘宝镜像，cnpm -v(不直接显示版本号),安装webpack，npm install webpack -g后报错，缺少文件enoent，用cnpm install webpack -g后提示webpack-cli和webpack-manage选一种安装，npm install webpack-cli -g,再用cnpm install webpack -g,webpack -v才正常，npm install vue-cli -g安装脚手架，npm -V正常。

2. package.json里的dependencies加入"jquery" : "^2.2.3"，然后npm install

   在webpack.base.conf.js里加入
   

   var webpack = require("webpack")

   在module.exports的最后加入

   plugins: [
   new webpack.ProvidePlugin({
   jQuery: "jquery",
   $: "jquery"
   })
   ]

   然后npm run dev

3. npm install element-ui --save，main.js中
   

   import ElementUI from 'element-ui'

   import 'element-ui/lib/theme-default/index.css'

   Vue.use(ElementUI)

4. npm install -D sass-loader node-sass

   <style lang="scss" type="text/scss"></style>

5. cnpm install echarts -S

   main.js中

   import echarts from 'echarts'         Vue.prototype.$echarts = echarts

6. cnpm install axios --save

   main.js中

   import axios from 'axios' 

   Vue.prototype.$http=axios 

   在config/index.js修改dev，（仅开发环境下解决跨域问题）

7. npm install vuex --save

   main.js中

   
   

   

   
   

   
   

   

   
   

   

8. ie11打开vue2.0项目空白,控制台报错 
   vuex requires a Promise polyfill in this browser；

   Babel 默认只转换新的 javascript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁） 的技术。

   npm install babel-polyfill --save-dev

   在main.js中引用 
   import 'babel-polyfill'

可以在webpack.base.config.js修改

module.exports = { 

entry: { 
app: ["babel-polyfill", "./src/main.js"] 
} 
}; 
替代 
module.exports = { 
entry: { 
app: './src/main.js' 
} 
} 
npm install es6-promise --save   //兼容ie9?

import 'es6-promise/auto'

9.vue拖拽排序--csdn

10.国际化--csdn