搭建vue框架项目遇到的问题和过程

    技术2022-07-11  96

    https://jspang.com/detailed?id=26#toc28 (技术胖)

    我们用vue init命令来初始化项目,具体看一下这条命令的使用方法。

    $ vue init <template-name> <project-name>

    init:表示我要用vue-cli来初始化项目

    <template-name>:表示模板名称,vue-cli官方为我们提供了5种模板,

    webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。

    webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。

    browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。

    browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。

    -simple-一个最简单的单页应用模板。

    <project-name>:标识项目名称,这个你可以根据自己的项目来起名字。

    在实际开发中,一般我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令:

    vue init webpack vuecliTest

    输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

    Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitestProject description:项目描述,默认为A Vue.js project,直接回车,不用编写。Author:作者,如果你有配置git的作者,他会读取。Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择YUse ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n,如果你是大型团队开发,最好是进行配置。setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。

     

    https://blog.csdn.net/m0_37605642/article/details/90437925(scss在Vue中的安装及使用)

    一、安装 npm install node-sass --save-dev //安装node-sass  npm install sass-loader --save-dev //安装sass-loader  npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的! 二、配置文件 在webpack.base.conf.js 文件下的配置 rules rules:[ ... { //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别scss!     test: /\.scss?$/,     loaders: ["style", "css", "sass"] } ]

    在webpack.base.conf.js 文件下的配置 rules  

    三、在vue模板组件中引用lange="scss" <style lang="scss" scoped> ... </style> style中引入

    https://blog.csdn.net/ze1024/article/details/100516650 (vue安装node-sass编译报错)

    这是因为当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行,下面说一下修改方法,很简单,如下,找到package.json文件,里面的 "sass-loader"的版本更换掉 就行了。

    我本地是将 "sass-loader": "^8.0.0",更换成了 "sass-loader": "^7.3.1",

    vue中使用scss时报错(Module build failed: TypeError: this.getResolve is not a function at Object.)

    sass-loader版本过高

    1.先卸载当前版本npm uninstall sass-loader

    2.再安装 npm install sass-loader@7.3.1 --save-dev

    https://www.jianshu.com/p/e5b9ed2107d7 (最全Vue框架整理从基础到实战(三))

     

    https://blog.csdn.net/qq_40128367/article/details/82735310 在vue项目中:统一封装 Axios 接口与异常处理

    https://www.jianshu.com/p/2e5973fe1223  VueX(Vue状态管理模式) 将store挂载到当前项目的Vue实例当中去

    https://segmentfault.com/a/1190000007535316  理解 JavaScript 的 async/await

     

    https://www.jianshu.com/p/c45974292915 VUE如何封装一个组件

    https://blog.dbsgw.cn/post-179.html      大数据量性能优化

     

    「前端进阶」高性能渲染十万条数据(虚拟列表)

    https://blog.csdn.net/qq_37818095/article/details/102954854?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-10.nonecase

     

    Vue-router vue路由  https://jspang.com/detailed?id=25

    vue编程式导航,页面传参   https://www.cnblogs.com/ygyy/p/10303754.html

     

    解决VUE项目重复点击菜单报错:Avoided redundant navigation to current location: “/xxxxx“. 问题

    https://blog.csdn.net/weixin_42288182/article/details/107287172?>

     

    Vue keepAlive 页面缓存

    https://zhuanlan.zhihu.com/p/54822855

    https://www.cnblogs.com/smart-girl/p/10496769.html

    在Vue中使用echarts

    https://www.jianshu.com/p/cf0a54374419

    echarts官方示例  https://echarts.apache.org/examples/zh/index.html#chart-type-pie

     

    Vue 爬坑之旅--嵌套路由默认选中第一个子路由,并且主路由和子路由都处于激活状态

    https://blog.csdn.net/zgh0711/article/details/79716506

     

    vue的mixins的使用

    mixins就是混入。一个混入对象可以包含任意组件选项。同一个生命周期,混入对象会比组件的先执行。

    https://www.cnblogs.com/luguankun/p/10849636.html

    vue-gemini-scrollbar(vue组件-自定义滚动条)

    https://segmentfault.com/a/1190000013338560

    团队代码规范eslint检查  取消eslint检查   https://blog.csdn.net/qq_31001889/article/details/81205632

     

    vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    https://www.cnblogs.com/zdd2017/p/11065429.html

     

    Processed: 0.010, SQL: 9