脚手架vue-cli搭建项目问题总结

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

安装css处理器

npm install -D stylus-loader stylus 要安装这两个插件

• 思考？为什么要安装stylus-loader,因为webpack不认识stylus，需要转换为css，再去转换为js（有css-loader），才能被识别。
• 注意：其中可能会报错

原因：stylus-loader安装的版本过高

解决方案： 移除掉该版本，再下载对应版本。

1.cnpm uninstall stylus-loader 2.cnpm i stylus-loader@3.0.2 -S

移动端rem插件安装及配置

1. npm install lib-flexible --save

2. main.js中添加 import 'lib-flexible/flexible.js'

3. 安装px2rem-loader npm install px2rem-loader --sav

4. 在vue.config.js中配置：如果没有该文件夹就新建。

   module.exports = {
   chainWebpack: config => {
      config.module
          .rule('stylus')
          .test(/\.stylus$/)
          .oneOf('vue')
          .use('px2rem-loader')
          .loader('px2rem-loader')
          .before('postcss-loader') // this makes it work.
          .options({ 
            remUnit: 37.5, 
            // 设计搞/10 比如你的设计稿是750px的，那你就要设置成75；如果是375px的，就要设置成37.5
            // remPrecision: 8 
          })
          .end()
   },
   // lintOnSave:false
   }
   

5. 在<style></style>标签里面引入css文件，需要写成：

   @import '~@/assets/css/minin.styl'

   也可以在vue.config.js里面为路径取别名

vue项目启动时，文件的执行顺序

1、执行index.html文件

2、执行main.js文件

3、main.js挂载了app.vue文件，用app.vue的templete替换index.html中的 <div id="app"></div>

4、main.js中注入了路由文件，将对应的组件渲染到router-view中

5、router-view中加载Layout文件

6、Layout 加载Navbar, Sidebar, AppMain

在项目中曾经遇到这样一个问题，因为路由拦截是在main.js中写的，但是在路由跳转之前，用户需要登录，所以，只有等异步登录之后才去跳转路由，这里面就可以在main.js里面写async和await,等异步完成之后，再去跳转路由。

static文件夹下面的文件可以被外部访问到，比如可以在url中直接访问到。