从0开始搭建一个vue项目

                                         从0开始搭建一个vue项目

为毛要写这个呢，主要是闲得蛋疼和不想接手一些一涉及把线下接口改到线上接口就要全部vue文件各种找(url全局)，和vuex的store.js里面放完全部的数据，一页一千多行的见过没。

其实这章主要讲如何让项目好管理点和防止接手人拿刀上你家喝茶，是摆脱菜鸡通往初级的必经之路。

1、vue init webpack 你的项目名，创建一个webpack模板的vue项目。拿到项目先别急着码代码，先把使用环境搭建好先，把axios、vuex、element之类需要安装的库安装好先。

npm install axios

2、vue的链接去除#号：去路由的index.js文件那把mode: 'history'这句加上去，但是这个需要运维的配合

vue单页面 刷新报404 not found错误_雪碧配土豆的博客-CSDN博客

export default new Router({ 
    mode: 'history', 
    routes: [{ path: '/', redirect: 'Index' }]
}]

3、全局url设置：这类一定要做的，不然别的方法也行。不然后端让你把url从线上切到线下测试，你一个个页面找一个个改？

链接：vue全局url_chaosama的博客-CSDN博客_vue全局url

再配合axios网络请求封装，这样的话如果请求头需要带什么参数的话就不需要重复获取值重复写。

vue axios网络请求方法封装_chaosama的博客-CSDN博客

4、vue登录过期重定向和请求拦截器：下面链接的内容选做

  （1）登录过期重定向：如果你的项目登录过期了需要回到登录页面，这个就需要做。

  （2）请求封装：如果你的请求需要在headers里面加上token之类的东西，就做这个。

  （3）请求拦截器：如果请求需要拦截下来做检测的话就做这个。

链接：vue登录过期重定向和请求拦截器_chaosama的博客-CSDN博客_vue 登录过期

5、vuex的使用与部署：如果要用到vuex，最好做下这个

链接：vuex的使用与部署_chaosama的博客-CSDN博客

6、到index.html添加网站小图标，ico复制到static文件夹，然后到index.html

<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

 7、初始化样式表，简单来说就是去除默认样式，像那些为什么写网页总会留边啊，li总会有个点跟着的问题都可以通过初始化样式表解决，可以去除你不少的麻烦。

初始化样式表_chaosama的博客-CSDN博客

8、自适配，：vue适配pc各屏幕_chaosama的博客-CSDN博客_vue适配

      但该插件已经停止更新，且多人联合开发时容易出状况，建议使用rem与vh vw

9、切换新页面时返回屏幕顶部(建议做)

//main.js
router.afterEach((to, from) => {
  window.scrollTo(0, 0)
})

10、当你储存登录状态时决定用localStorage的时候需要注意安全性问题；而当使用sessionStorage的时候则需要在App.vue里面做好一个检验登录状态为null而返回登录页面的判断，是为防止用户关掉浏览器然后从链接进入导致的页面请求缺少token无法加载。

现在基本搭建好了，剩下的就只是@的部署和webpack的部署之类的，这个我就不多赘述，毕竟帖子不少；而assets与static文件夹应该用哪个来放文件呢：百度下assets与static，他们说得更详细。