从搭建到完成一个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文件(此文件在根目录下)中添加配置 (若第4步为全局引入则忽略第3步)
{
"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);
全局引入,在main.js中:(注:若全局引入则务必不要配置第3步,否则会冲突导致报错Vant is not defined)
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
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