从搭建到完成一个vue项目

【1】搭建vue脚手架2.0

1、电脑里新建文件夹demo，用vscode打开文件夹
2、用vscode打开终端, 通过 npm uninstall -g @vue/cli 卸载vue-cli3.0的包(3.0和2.0是不一样滴，避免冲突，先卸载3.0)
3、npm install -g vue-cli  全局安装vue-cli2.9.6的包（安装全局vue请不要使用yarn）
4、vue --version 检查一下版本是否是2.0+，是否安装成功
5、vue init webpack newProject 创建新的项目    vue init webpack 项目名
(ps:此行代码执行后会有各种询问，记得 "Use ESLint to lint your code? "严格模式选择no。其他询问随意)
6、将newProject外面的demo文件夹去除，只留newProject作为最外层文件夹，
7、用vscode打开newProject文件夹,然后npm install,再然后 npm run dev 启动项目

【1】搭建vue脚手架3.0(提个醒：以下链接是vue3.0以上的搭建方式)

安装步骤详见：https://www.cnblogs.com/huihuihero/p/12272594.html

ps：vscode记得安装插件Vetur，以使得vue代码高亮显示

更详细步骤请见vue.js官网：https://cli.vuejs.org/zh/guide/installation.html

vue3.0新特性：以前添加插件包是通过npm install plugin的方式。现在可通过vue add plug直接添加插件包，且这种方式添加后,vue会给你做自动适配。

【2】移动端rem转换及flex布局(PC端也建议做此屏幕适配，配置方法见以下链接)

https://www.cnblogs.com/huihuihero/p/11451696.html

【3】vue2.0使用less

1、安装less依赖：npm install less less-loader --save
2、修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加：
module:{
    rules:[
        /*添加less配置代码*/
        {    
            test: /.less$/,
            loader: "style-loader!css-loader!less-loader",
            options: { sourceMap: true }   // 可以在控制台中看到当前标签样式来自于哪个less文件
        },
        {
            test:/.vue$/,
            loader:'vue-loader',
            options:vueLoaderConfig
        },
        。。。。。。
    ]
}    
3、在style中使用,添加lang="less"
<style scoped lang="less"></style>

【4】使用移动端ui组件库，如vant-ui(非移动端项目可使用element,antd等组件库)

详细步骤见官网：https://vant-contrib.gitee.io/vant/next/#/zh-CN/quickstart
注：vant提供了vue2.x版本使用的vant包以及vue3.x版本使用的vant@next包。注意不要安装错了。
特别注意，这里的vue3.x是vue版本不是vue-cli脚手架版本哦。

1、安装Vant-ui    yarn add vant & npm install vant -D
2、安装按需引入的babel插件  yarn add babel-plugin-import & npm install babel-plugin-import -D
3、
//在.babelrc文件(此文件在根目录下)中添加配置   
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
4、在main.js中按需引入   
import {Button,Tag} from 'vant';
Vue.use(Button).use(Tag);
5、按照vant官网api使用即可
<van-button type="primary">按钮</van-button>

【4】PC端使用antd-vue组件库

详见第一条：https://www.cnblogs.com/huihuihero/p/11865746.html

【5】安装，注册，使用axios(PC端项目建议使用标准格式)

安装： yarn add axios 或 npm install axios --save

注册：main.js页面
import axios from 'axios'
Vue.prototype.$axios = axios    //全局挂载到vue上，其它页面不需引入即可使用
(若不想挂载在全局，则在需要使用的页面通过import * as axios from 'axios'引入，然后axios.get调用即可)
axios.defaults.withCredentials=true  //跨域请求设置(axios默认是发送请求的时候不会带上cookie的，需要通过设置withCredentials: true来解决)
axios.defaults.headers.post['Content-Type'] = 'application/json'  //设置post请求头（看情况写）

使用：this.$axios.get

举例：
//标准格式(此种方式较标准，可兼容IE浏览器)
getDemoList(){
    let config={
        method:'GET',
        params:{
            page:this.page,
            pagesize:this.pageSize,
        },
    }
    this.$axios(`${common.base}/admin/getdemo`,config).then(res=>{
        if(res.data.code==200){
            if(res.data.data.list){
                this.demoList=res.data.data.list
            }
        }
    }).catch(err=>{}) //catch一定要有，不写可能会报错 Uncaught (in promise) Error: Network Error
},
 
//简易格式(在不需要兼容IE的情况下可使用此种格式，比如移动端项目或者非大众PC端项目)
getDemoList(){
    this.$axios.get(`${common.base}/admin/getdemo?page=${this.page}&pagesize=${this.pagesize}`).then(res=>{
        if(res.data.code==200){
            if(res.data.data.list){
                this.demoList=res.data.data.list
            }
        }
    }).catch(err=>{})
}

【6】安装，注册，使用js-cookie(存储量较大时可使用localStorage或sessionStorage代替)

https://www.cnblogs.com/huihuihero/p/14143908.html

【7】根据路由改变动态改变页面标题

在main.js中添加以下代码
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next();
})

在router.js路由页面
{
    path:'/user/login',
    component:Login,
    name:'Login',
    meta:{title:'登录'}  //设置标题
},

【8】使用iconfont

1、在assets文件夹下新建iconfont文件夹
2、从iconfont下载字体图标包(选择Font class格式下载)，下载下来之后，将文件中的这6个文件放入iconfont中(见下图)
3、在main.js中引入：import './assets/iconfont/iconfont.css'
(若有报错，安装css-loader包)
4、使用：<div class="iconfont iconyiguoqi"></div>

【注】vue3.0+的Vue.config.js文件常用配置

https://www.cnblogs.com/huihuihero/p/13155910.html

【注】一个移动端项目基本的功能优化

1、登录后回退至上一页功能
https://www.cnblogs.com/huihuihero/p/11797878.html (搜：登录成功后跳转)

2、每个页面的loading加载中提示
思路：初始时，加载状态为true，接口请求成功设为false

3、部分页面需要keepalive缓存及记忆上次浏览位置
https://www.cnblogs.com/huihuihero/p/11905439.html

4、简单的微信h5页面分享功能及ios微信分享url不变问题的解决
https://www.cnblogs.com/huihuihero/p/11649096.html (搜：ios微信浏览器分享问题)

5、安卓微信浏览器(灰色)与ios微信浏览器(白色)背景色不同的问题
https://www.cnblogs.com/huihuihero/p/12058388.html

6、服务器出错时，catch报错优化，要让用户看得懂(如视频列表信息请求出错，请稍后再试)

7、上线打包去除concole.log输出及减少项目打包后体积
https://www.cnblogs.com/huihuihero/p/11649096.html (搜：项目上线屏蔽console，压缩项目打包后体积)

【注】一个PC项目基本的功能优化

- 兼容IE，解决IE浏览器打开空白问题
https://www.cnblogs.com/huihuihero/p/12199709.html

- 使用keepAlive缓存部分页面加载
https://www.cnblogs.com/huihuihero/p/11905439.html