vue-cli的创建、基本配置和遇到的问题总结

vue-cli的创建及基本配置

1. 创建 vue-cli 项目

1. 确保本地安装了最新版本的nodejs环境(会自带npm环境);

2. 全局安装vue-cli，命令：npm i -g vue-cli

3. 创建项目，以下都为例子创建步骤，命令:vue init webpack testone

   3.1 Project name(testone): 默认括号内容，直接Enter

   3.2 Project description(A Vue.js project) 项目描述，默认括号内容

   3.3 Author (necrodiver neclodiver@live.com) 作者，默认括号内容

   3.4 Runtime + Compiler: recommended for most users
   
   ​ Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 这里是上下两条，默认选第一条就行了

   3.5 Install vue-router(Y/n) 安装Vue路由，这里默认安装Y，直接Enter

   3.6 Use ESLint to lint your code?(Y/n) 是否使用ESLint管理代码，作用是统一代码规范，直接按默认Enter（提示：在后边使用Vux时这个可以选n，要么就会出一些问题还要调回去，比较麻烦）

   3.7 Standard (https://github.com/standard/standard)
   
   ​ Airbnb (https://github.com/airbnb/javascript)
   
   ​ none (configure it yourself) 然后是选择三种js风格(编码规范)，我也是选择第一个Standard，Enter

   3.8 Set up unit tests(Y/n) 是否安装单元测试，这里没时间搞单元测试，我是直接过了，输入n,Enter

   3.9 Setup e2e tests with Nightwatch? (Y/n) 用Nightwatch设置E2E测试，还是不使用，输入n，Enter

   3.91 Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)

   ​ Yes, use NPM
   
   ​ Yes, use Yarn
   
   ​ No, I will handle that myself

   ​ 这里选择NPM，直接默认，然后Enter

4. 定位到testone文件夹，命令：npm run dev 然后Ctrl+下边出现的链接就可以在浏览器中预览了 (这时除非安装插件，我们不用关闭再打开，环境内置有根据内容变化重新生成预览)

2. 嵌入Vux

1. 先使用Ctrl+C 来关闭正在运行的项目，按下后提示：终止批处理操作吗(Y/N)? 输入y ，然后Enter

2. 命令：npm install vux --save 来安装vux组件环境 ，点击查看Vux安装配置 ，按这个来搞

3. 命令：npm i vux-loader --save ，第2步的vux-loader在项目中没有，所以安装一下

   提示：--save 和 --save-dev 的区别是 --save 会在 package.json 的 dependencies 下边，--save-dev则会生成在 devDependencies 下边

   • devDependencies 里面的插件只用于开发环境，不用于生产环境。
   • dependencies 是需要发布到生产环境的。详细可百度查一下

3. 配置路由

1. 打开目录下src>router>index.js，这个就是路由配置地址了，已经有一个HelloWorld了，我们可以按照这个方式来配，当然还有其他的方式

2. 在routes下边新增一个IndexA吧，以下

   ​

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld'
   import IndexA from '@/components/IndexA'
   
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       },{
         path:'IndexA',
         name:'IndexA',
         component:IndexA
       }
     ]
   })
   
   

3. 然后在 src>components 下新建一个 IndexA.vue 文件，可以写一些内容表示下，但是在运行时会报错，这时会提示ESLint语法的不规范，我们则需要

   在 bulid>webpack.base.conf.js 下找到 config.dev.useEslint 定位到配置，useEslint: true 改成 false ，再运行一下，可以去掉 src>App.vue 里边的一些影响的样式设置，比如logo图

4. 如果其他人使用已经创建的项目时需要先运行 npm i 下载插件环境，因为插件环境在 node_modules 文件夹中的，如果使用SVN，在创建项目后首先需要删除 node_modules 文件夹，然后加入过滤，node_modules 文件夹不要上传到服务器，git 则不用考虑了，创建项目时就已经有了过滤文件夹了

使用vue单页面遇到的问题

1. 单页面跳转不会销毁原js绑定事件，比如scroll(在移动端上拉加载更多数据，使用了scroll事件，如果跳转到子页面，在子页面进行上拉到底部，会发现在浏览器的NetWork监测中会有加载请求，说明之前的scroll未被销毁)，这时需要在跳转前清除绑定的事件
2. 性能低的手机在vue渲染页面前有可能js事件先执行了，比如列表渲染后需要取页面高度手动计算一些距离，这时候如果把需要计算的js写在setTimeout中需要适当的延迟执行，我这里之前给了10ms执行延迟，但是还是没有等到渲染完毕就执行了计算，导致报错，然后我把延迟提高到了200ms,这时体验也不是太好，有一段闪烁效果，但也只能这么做了
3. 在IOS微信中，Vue单页面跳转后复制链接为原第一次打开的页面链接，如果在跳转后的页面进行分享，那么复制的链接就不当前页面了！解决办法就是在需要分享的页面来源页面使用window.location.href来跳转，而不使用其自带页面或者history.back()等方法(非vue单页面的在ios中使用history.back()/history.go(-1)有可能会出现返回页面不刷新，这时如果使用localStorage进行传值就出问题了)
4. 在单页面里，我遇到了一个很奇葩的问题：使用单页面，有列表，初始化方法名为init()，然而在进入子页面后返回，init触发了2次！导致执行了2次获取数据，页面数据也就多了2次重复；单页面中如果methods中有init方法，谨记不能使用这种特殊的方法名，我指的是vue单页面有可能自己有方法名与此相同，导致有可能调用2次，从而出现一些问题，所以尽可能采用自己命名
5. 数组列表渲染，并不会直接渲染外部元素，这个在单页面或非单页面都有问题(据了解Vue3.0 会解决这个问题 https://mp.weixin.qq.com/s/k6OhMNrpagtTmbhkW-tmZg)
   
   https://cn.vuejs.org/v2/guide/list.html#注意事项
   
   https://cn.vuejs.org/v2/guide/list.html#变异方法
   
   另外终极解决办法：this.$forceUpdate();
6. 单页面打包后的样式污染非常严重！非常严重！非常严重！最好不要使用Scoped，如果单页面新增样式，务必在最外层div添加一个唯一标识的class，下边所有css使用以最外层class为根节点引用。组件可以使用scoped，但是样式还是务必使用唯一class,不要直接在body上写样式，这样样式会带入其他页面
7. 配置路由最好和页面文件路径差不多，如果不一样，也可以试试，反正最后你都不会很容易根据url地址找到文件所在位置

在移动端遇到的问题

1. 移动端使用的是touch事件，而且浏览器判断事件是300ms，是浏览器设计如此，判断单击和双击的时间间隔为300ms，在连续300ms内单击1次为单击，连续300ms内单击2次为双击
2. 移动端会有滚动穿透问题，此问题常出现场景：在页面中有滚动，然后在弹出层也有滚动，在弹出层中滚动非滚动内容时会把底层页面带着滚动,找了网上很多方法，最后还是有几种参考，不过实际效果并不是很理想，但是比起没有的来说还是很好了，首先可以给弹出蒙层添加阻止冒泡事件，另外也可以在弹出前把底部滚动页面的 position 设置为 fixed，然后在弹出层收回后把底部页面position还原 ，一定要记住在移动端尽量少用jquery，如果必须要使用jquery的一些事件，也要使用zepto.js
3. IOS微信浏览器不支持中文cookie内容，可以使用encodeUrl进行转换一下，然后取的时候再使用decodeURI转一下