来吧，记录一下项目步骤！
1.创建项目
1.卸载旧版本 npm uninstall vue-cli-g
2.安装新版本 npm install -g @vue/cli
3.检查版本是否正确 vue --version
4.创建项目 vue create hellow-world
5.在Windows上创建项目 winpty vue.cmd create hello-world
一个小tip: --save-dev和--save的区别
npm insatll在安装npm包时，有两种命令参数可以把它们的信息写入package.json文件，
--save || -S * 运行依赖（发布）*
dependencies键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，
我们在开发完后肯定还是要依赖它们，否则就运行不了。
-save-dev || -D *开发依赖（ 辅助 ）*
devDependencies键下，开发时的依赖比如安装js的压缩包gulp-uglify因为我们在发布后用不到它，
而只是在我们开发才用到它
2.引入项目基本配备文件
src文件下新建assets文件，包含：
1.icons文件夹
2.img文件夹
3.js文件夹
4.styles文件夹
关于引入这些文件：
在main.js中引入阿里高清和icons ,
import ' ./assets/icons/flex.js '
import ' ./assets/icons/index.js '
在app.vue中引入全局样式设置，
import ' ./assets/icons/index.js'
svg雪碧图：
安装svg-sprite-loader,
npm insatll svg-sprite-loader --save-dev
原理：
svg-sprite-loader将加载的svg图片拼接成雪碧图，放到页面中，其他地方通过use复用。
关于stylus:
stylus是css的预处理框架。
css预处理，顾名思义，预先处理css。那css怎么预先处理呢？stylus给css添加了
可编程的特性，也就是说，在stylus中可以使用变量、函数、判断、循环一系列css没有的东西来编
写样式文件，执行这一操作之后，这个文件可编译成css文件。
安装：
npm install stylus --save
npm insatll stylus-loader --save
3.postcss-pxtorem移动端适配的实现
postcss-pxtorem是PostCSS的插件，用于将像素单位生成rem单位
安装：
npm install postcss-pxtorem --save-dev
配置：
在vue.config.js中引入相关配置
4.移动端使用vConsole真机调试
安装：
npm install vconsole --save-dev
使用，在main.js中引入,
import vConsole from 'vconsole'
let vConsole = new vConsole()
Vue.use(vConsole)
5.安装axios
Axios是一个基于promise的HTTP库，可以在浏览器和node.js中用。
特点：
从浏览器中创建XML HttpRequests，
从node.js创建http请求，支持Promise API,
拦截请求和响应，
转换请求数据和响应数据，
取消请求，
自动转换JSON数据，
客户端支持防御XSRF，
安装：
npm install axios
使用：
在src文件夹下新建api文件夹，在api中统一封装axios，调用接口
6.安装qs插件
qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
特点：
qs.parse()是将URL解析成对象的形式，
qs.stringify()是将对象序列化成URL的形式，以&进行拼接
安装：
npm install qs
使用,在调用接口的地方引入:
import qs from 'qs'
8.安装vant
Vant是有赞开源的一套基于Vue2.0的Mobile组件库。
安装：
npm install vant -S
7.安装animate.css
animate.css是一个基于css3 animation的动画库。
安装：
npm install animate.css -S -D
使用：
在main.js中引入import 'animate.css',全局使用
8.安装better-scroll
better-scroll是一款重点解决移动端（已支持pc）的各种滚动场景需求的插件。它的核心是借鉴iscroll的实现，
它的API设计基本兼容iscroll，在iscroll的基础上又扩展了一些feature以及做了一些性能优化。
better-scroll是基于原生js实现的，不依赖任何框架。它编译后的代码大小是63kb,压缩后是35kb,
gzip后仅有9kb,是一款非常轻量的js lib。
安装：
npm install better-scroll --save
使用，在使用的文件中引入
import BScroll from 'better-scroll'
9.安装vue-awesome-swiper插件
安装：
npm install vue-awesome-swiper --save
使用：swiper这种用到的组件不是很多的建议局部引入，
在需要用到的swiper的组件引入，如list.vue
<script>
import "swiper/dist/css/swiper.css";
import { swiper,swiperSlide } from "vue-awesome-swiper" //局部引入
export default {
components:{
swiper,
swiperSlide
}
}
</script>
<template>
<div>
<!-- vue-awesome-swiper结构 -->
<swiper :option="swiperOption">
<swiper-slide class="swiper-slide"
v-for="(item,index) in slide"
:key="index">
slide{{item}}
</swiper-slide>
<!-- 分页器 -->
<div class="swiper-pagitation" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'// 局部引入
export default {
name: 'list',
components: {
swiper,
swiperSlide
},
data () {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination', // 分页器作用对象
clickable: true // 分页器小圆点是否可点击
}
},
slide: [1, 2, 3, 4]
}
}
}
</script>
<style lang="stylus" scoped>
.swiper-slide
height 400px
background pink
font-size 50px
text-align center
line-height 400px
</style>
9.安装浏览器顶部进度条
开发过程中，有时我们需要给项目添加一个进度条来展示界面是否已经完成加载，
安装：
npm install nprogress
使用：（这里选择了在调用接口时使用，在axios文件夹中~）
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//在request拦截器中显示进度条Nprogress.start()
axios.interceptors.request.use(config => {
//请求开始时显示进度条
Nprogress.start()
return config
})
//在response拦截器中隐藏进度条Nprogress.done()
axios.interceptors.request.use(config => {
//服务器响应时完成进度条
Nprogress.done()
return config
})
网友评论