基于vue-cli,sass,vant的移动端项目

2019/03/27 13:38
阅读数 43

项目架构

开始

vue init webpack    项目名称         //新建项目,cd进入新项目

npm install axios                    //先安装!

npm install --save axios vue-axios   //然后!

npm install vuex --save              //安装vuex

npm i vant -S                        //安装vant,Ui框架,选择性安装

npm install babel-plugin-import -D            // 与vant是绑定安装关系

配置babelrc文件

 "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }]

]

然后可以在模块中引入或全局引入,本人采用全局引入

import { Button } from 'vant'
Vue.use(Button)

 

 

npm install --save-dev node-sass sass-loader  //安装sass

npm install mockjs                          //选择性安装,mock数据

 

打开webpack.base.config.js在loaders里面加上

  {
     test: /\.scss$/,
     loaders: ["style", "css", "sass"]
  },

 

 
全局引入sass


单独引入

<style lang="scss" scoped="" type="text/css"></style>

注:sass的变量要是想引入全局,先创建文件assets/css/all.scss

npm install sass-resources-loader --save-dev

在项目build文件夹里找到utils.js ,定位到下边代码

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } 

把上面这句scss: generateLoaders('sass'),改成如下

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/all.scss')//这里按照你的文件路径填写 } } )
然后重新启动

配置main.js文件

 api联合config进行抽离,应用了axios,promise,await,async达到在外同步执行,公共函数内异步请求的效果,

 

 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部