使用VUE + Vant + uView + Sass搭建移动端项目

发表于 更新于
使用VUE + Vant + uView + Sass搭建移动端项目~

使用VUE + Vant + uView + Sass搭建移动端项目

框架搭建

安装vue

​ 新建一个存放项目的文件夹目录

​ 在目录内cmd

​ vue init webpack ‘项目名称’，如：vue init webpack MyPortalProject，然后根据自身选择需要的东西

​ 完成，直接npm run dev运行vue项目

配置ESLint

打开.eslintrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
const isPro = process.env.NODE_ENV === "production";
module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion:true
  },
  env: {
    browser: true,
    es6: true,
  },
  extends: ['plugin:vue/essential'],
  plugins: ["vue"],
  // "off"或者0    关闭规则关闭
  // "warn"或者1   在打开的规则作为警告（不影响退出代码）
  // "error"或者2  把规则作为一个错误（退出代码触发时为1）
  rules: {
    "vue/no-use-v-if-with-v-for": ["error", {
      "allowUsingIterationVar": true
    }],
    // 代码风格规范
    "quotes": [2, "single"], //字符串使用单引号
    "space-infix-ops": 2, // 操作符周围要有空格
    "spaced-comment": 2, //注释风格要有空格
    "comma-spacing": 2, //逗号后要有空格
    "comma-style": [2, "last"], //逗号风格，换行时在行首还是行尾
    "consistent-this": [2, "_this"], //this别名
    "curly": [2, "all"], //必须使用 if(){} 中的{}
    "brace-style": [2, "1tbs"], // 大括号和关键字在同一行
    "no-unused-vars": [0, {"vars": "all", "args": "after-used"}], //不能有声明后未被使用的变量或参数
    "no-use-before-define": 0, //未定义前不能使用
    "arrow-parens": 2, //箭头函数用小括号括起来
    "no-multiple-empty-lines": [1, {"max": 2}], //空行最多不能超过2行
    "operator-linebreak": [2, "after"], //换行时运算符在行尾还是行首
    "indent": [2, 2], //缩进风格,缩进两格
    "comma-dangle": [2, "never"], //对象字面量项尾不能有逗号
    "dot-location": 2, //对象访问符的位置，换行的时候在行首还是行尾
    "func-call-spacing": 2, //函数调用不要空格
    "key-spacing": [2, { "afterColon": true, "mode": "strict" }], // key的冒号后面要有空格
    "no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
    "no-duplicate-case": 2,//switch中的case标签不能重复
    "no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
    "no-multi-spaces": 2,//不能用多余的空格
    "no-multi-str": 2, //字符串不能用\换行
    "object-property-newline": 0, //对象属性换行时注意统一代码风格。
    "padded-blocks": 0,//块语句内行首行尾是否要空行
    "vue/v-bind-style": ["error", "shorthand"],
    "vue/v-on-style": ["error", "shorthand"],
    "prefer-destructuring": 0,
    "class-methods-use-this": 0,
    "no-mixed-operators": 0,
    "max-len": 0, //字符串最大长度
    "no-unused-expressions": 2, //禁止无用的表达式
    "import/no-dynamic-require": 0,
    "func-names": 0, //函数表达式必须有名字
    "no-underscore-dangle": 0, //标识符不能以_开头或结尾
    "no-restricted-properties": 0,
    "no-restricted-syntax": 0,
    "no-prototype-builtins": 0,
    "no-plusplus": 0, //禁止使用++，--
    "one-var": 0, //连续声明
    "no-tabs": 0,
    "prefer-const": 0, //首选const
    "global-require": 0,
    "guard-for-in": 0, //for in循环要用if语句过滤
    "import/extensions":0,
    "no-console": 0,
    "no-return-assign": 0, //return 语句中不能有赋值表达式
    "no-param-reassign": 0, //禁止给参数重新赋值
    "no-nested-ternary": 0, //禁止使用嵌套的三目运算
    "camelcase": 0, //强制驼峰法命名
    "eqeqeq": 0,//必须使用全等
    "import/no-extraneous-dependencies": 0,
    "no-debugger": isPro ? "error" : "off"
  }
}

如果运行的时候发生错误：可能为ESLint生效，把代码格式修改为正确的ESLint再重新运行

安装axios

1
npm install axios --save-dev

安装vuex

安装：npm i vuex

新建文件store/index.js 

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'  
    *// 数据持久化*
    import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
export default new Vuex.Store({
    modules
    *// plugins: [createPersistedState()]*
})

使用：main.js

1
2
3
4
5
import store from './store'

new Vue({
    store
})

安装sass

sass-loader依赖于node-sass,所以要安装node-sass
1
2
3
npm install node-sass --save-dev    //安装node-sass
npm install sass-loader --save-dev     //安装依赖包sass-loader
npm install style-loader --save-dev    //安装style-loader

在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置

1
2
3
4
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
},

在需要用到sass的地方添加lang=scss

1
<style lang="scss" scoped></style>

注意：如果因为使用lang=“scss”后npm run dev报错，可能因为版本过高的原因，把

1
2
3
4
//卸载sass-loader
npm uninstall sass-loader
//安装更低的版本
npm install sass-loader@7.3.1 --save-dev

安装Vant框架

1
2
//npm 安装vant
npm i vant -S

引入组件（自动按需引入）

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

1
2
// 安装插件
npm i babel-plugin-import -D
1
2
3
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

配置scss（安装uview使用的sass10版本太高了）

1
2
npm i node-sass -D // 安装node-sass
npm i sass-loader@10 -D  // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错

安装uView

安装uView

1
npm install uview-ui // 安装

main.js引入uView主JS库

1
2
3
4
//在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);

在引入uView的全局SCSS主题文件

1
2
/*在项目src目录的uni.scss中引入此文件。*/
@import 'uview-ui/theme.scss';

引入uView基础样式

1
2
3
4
5
/* 在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性 */
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

配置easycom组件模式

此配置需要在项目src目录的pages.json中进行

1
2
3
4
5
6
7
8
9
10
11
// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

Cli模式额外配置

如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置：

1
2
3
4
// vue.config.js，如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['uview-ui']
}