pc端vue项目总结

本博主之前没有做过vue的项目，基本是小白一个。领导规划一个新项目要用vue去做，没办法，只能从头学起。一路坑踩过来，有些经验教训觉得有必要记录一下。避免以后再掉坑里。

环境

首先，vue项目是基于nodejs的，所以要先确保node安装完好（百度下，超简单）。然后，：

1. 最好安装下淘宝 NPM 镜像,以便快速构建项目、生成依赖等：npm install -g cnpm --registry=https://registry.npm.taobao.org
   cmd命令行输入 cnpm –v检测安装是否成功；
2. 安装webpack: cnpm install webpack –g；
3. 安装脚手架 npm install vue-cli -g
   Vue –V 查看vue版本；

项目

cd 进入工作空间，使用命令vue init webpack 项目名称，搭建vue项目。
在命令搭建项目过程中，可以按需选择安装vue插件，比如vue-router、eslint等。
以上步骤完成之后，项目就建好了。使用开发工具打开项目，找到package.json,有这一行代码：‘“start”: “npm run dev”,’，使用npm run dev或者cnpm run dev命令即可运行项目。在浏览器输入localhost:8080,可以看到项目的默认首页。
vue框架本身比较小，但其可扩展性非常强。在项目中经常要根据业务需要引入一些插件，官方提供的插件https://github.com/vuejs这里基本都能找到。有需要其他插件可以去https://github.com搜索。

1. 组件间数据共享我们考虑使用vuex ，使用cdn加速包

  <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>

放在index.html里面就好。

2.路由我们用vue-router就好。使用cdn加速包

  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

当然为了性能方面考虑，要使用路由懒加载。vue项目实现路由按需加载(路由懒加载)的3种方式：https://blog.csdn.net/mzrxLXR/article/details/81484676

3.http通信有vue-resource、axios等插件，支持情况良好。

4.项目如果考虑响应式布局的话可以考虑bootstrap-vue插件：https://bootstrap-vue.js.org/或者 Element UI：https://cloud.tencent.com/developer/section/1489859。比较好用。

5.图标方面，建议使用阿里图标库里面的图标：https://www.iconfont.cn/，可选可定制化比较强。可以直接批量加入“我的项目”，然后下载导入到我们的项目，使用简单方便。

6.一些绘图方面的要求，比如折线图、条形图、雷达图等，可以使用vue-echarts：https://github.com/ecomfe/vue-echarts

7.文章编辑方面，vue-quill-editor比较合适：https://github.com/surmon-china/vue-quill-editor，虽然也有坑。编辑后的文章在页面展示的时候要引入该插件的一些样式表，不然显示会有问题。

8.消息提示框，vue2-toastr比较轻量级，效果蛮好，还可以自己改颜色。https://www.npmjs.com/package/vue2-toastr

9.树形下拉选择框，vue-treeselect表现良好，使用cdn加速包

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">  <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>

10.图片懒加载，有vue-lazyload插件，使用cdn加速包

<script src="https://cdn.bootcss.com/vue-lazyload/1.3.3/vue-lazyload.js"></script>

打包

修改config下的index.js：productionSourceMap改为false，服务器支持Gzip格式的话可以将productionGzip给为true，有svg图片多的情况可以在productionGzipExtensions数组里面加入’SVG’。
执行命令cnpm run bulid 即可打包项目。

分环境打包

有一套代码打包到多个环境的需求时，我们需要引入cross-env插件:cnpm i --save-dev cross-env,然后修改配置各环境参数，具体可参照Vue项目分环境打包的实现步骤：https://blog.csdn.net/xinzi11243094/article/details/80521878，一步一步进行。不出错即可实现需求。