0

怎么才能搭建一个完美的vue项目的基础工程(包含vue + webpack + sass + es6 + async+ Element)?

0422 87
3月4日提问
7 个回答
1

给你个建议,先将任务分解,然后一步一步学习,可以如下过程搭建。
1、先用webpack搭建一个最简单的web项目,学习webpack的几个核心概念,插件,loader等等等。
2、添加 webpack-dev-server,实现工程启动启动打开浏览器,热替换等功能。
3、添加引用css样式支持,然后添加sass,less支持等。
4、添加babel编译(将es6编译成es5),eslint编写检查等功能。
5、添加vue支持。
6、添加各类vue-router,vuex等功能支持。
7、最后添加element支持。
8、开发环境配置好了,在写打包配置。
这样就可以把整个工程分解,逐步完成,对webpack会有比较深的印象。

1

看大家都是推荐内容,那我就来手写一点吧, 其实搭建完后 基础内容都是差不多的(router + store + sass/less + bable 等);

关键在于自己的项目流程习惯性问题处理;

下面是我个人配置 vue 项目上的一些需要处理的点
1/ 全局公共文件 这里设置版本号, 获取host 判断dev test pro 环境, 全局公共url / cdn 地址等信息
2/ axios 的封装, 这里根据项目做特殊处理,get/post二次封装等, 例如拦截所以请求添加 token ,对dev 环境中的url 添加固定的 api标示(后端代理请求跨域处理) 当请求异常时是否做弹窗提示等;
3/ api 管理,全局 API 提取当公共文件中,通过dispatch 触发,当前页面内部的业务api 直接写在当前vue文件中
4/ 错误异常收集并上报处理, 利用$bus(具体实现看业务需求)
5/ router 做 require 按需加载,个人习惯 每个 业务独立一份router.js 管理 全局 通过addRoutes 添加

    const myRouter = new VueRouter({
              mode: "history",
              base: config.ROUTER_BASE_PATH,
              routes: []
            });
            
            myRouter.addRoutes([
              {
                path: "/",
                redirect: "/userList"
              }
            ]);
            
            myRouter.addRoutes(require("@views/login/router").default); // 登陆页
            

6/ views 下面按照业务分类为 文件夹形式,不太习惯另一种模式(components 下一切皆组件),太难找了,不好区分
7/ 组件间嵌套尽量不超过3级
8/ eslint 的配置, 官网配置的是 save 的是运行lint, 我个人 习惯借用husky的precommit时运行lint
9/ 写业务代码时,尽量多写 注释,个人认为一切的文档都不如注释来的明白和方便
10/ 分包处理, 防止单文件过大

0

你是想锻炼自己的动手能力吗?其实官方的脚手架就不错!

0

自己搭了个 楼主可以看看 用的less vue-cli3.0搭建脚手架

0

git上有一个vuejs-template的项目 可以参考一下 这是vue-cli的原型

撰写答案

推广链接