Vue项目创建/Vuex/Vue-Router/less/Vant（精选）（TypeError: node.getIterator is not a function）

Vue项目创建/Vuex/Vue-Router/less/Vant（精选）

已经替你避开无数个坑

1、创建Vue项目

1.1、你得先保证你的电脑上已经有vue/cli，你可以输入一下命令查看你的vue/cli版本

vue --version
# OR
vue -V

1.2、若你得电脑上没有vue/cli，请先下载它：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

下载完成，再次执行1，查看是否下载成功

1.3、创建一个vue项目

vue create vue_project_name

按照命令行的提示，cd到你的项目，执行

npm run serve

待项目启动成功，你可以到浏览器查看

2、引入Vue-Router(3.x)并使用

2.1、下载（Vue-Router@4.x已是默认版本，下载3.x需要指定）

npm install vue-router@3.0.1

2.2、使用

// main.js 中引入

import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter) 

const router = new VueRouter({
  routes,
  mode: 'history',
})

new Vue({
  router, 
  render: h => h(App),
}).$mount('#app')

// routes.js

import Home from './views/Home.vue'
import Login from './views/login/Login.vue'

const routes = [
  {
    path: '*',
    redirect: '/'
  },
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
  }
]

export default routes

// App.vue

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

3、引入并使用Vuex（使用3.x版本）

3.1、安装

npm install vuex@3.6.0 --save

3.2、创建store.js文件

// store.js

import Vue from 'vue'
import Vuex from 'vuex'
import a from './modules/a'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    pageCollapsed: false
  },
  modules: {
    a,
  },
  getters: {
    getPageCollapsed(state) {
      return state.pageCollapsed
    },
  },
  mutations: {
    update_page_collapsed(state, f) {
      return state.pageCollapsed = f
    },
  },
});

export default store;

3.3、main.js中使用

// main.js

import Vuex from 'vuex'
import store from './stores/store'

Vue.use(Vuex)

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

4、引入Less并使用

npm install --save less less-loader

内部已经实现less的加载，安装即可，不需要做其他操作
接下来，你就可以舒服地使用less的嵌套语法，变量等功能

5、实现rem布局（此处先挖坑）

// 安装px转rem插件

npm install postcss-plugin-px2rem --save-dev

// 安装lib-flexible实现自适应

npm i lib-flexible

新建postcss.config.js

module.exports = {
  plugins: [
    require('postcss-px2rem')({
      // rem 的单位  填设计稿的 1/10
      remUnit: 37.5,
    }),
  ],
}

此时已经可以有rem的效果了（偷笑）

6、安装使用Vant（注意默认版本）

6.1、安装（指定v2版本，默认的3版本对应vue3.x）

npm i vant@latest-v2 -S

6.2、实现vant组件的按需导入（强烈推荐）

先下载按需导入的依赖包：

 npm i babel-plugin-import -D

嘿，别忘了再babel.config.js加入：

// babel.config.js

  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

6.3、使用（有坑）

你使用vant组件时，组件并没有样式。

哦，原来是忘记导入样式文件了，现在导入：

// main.js

import 'vant/lib/index.css';

然后，你的浏览器就开始报错了：

Uncaught Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js): TypeError: node.getIterator is not a function

原因：用了postcss-px2rem与postcss-px2rem-exclude导致的问题

解决：使用postcss-pxtorem替换postcss-px2rem

卸载postcss-px2rem

npm remove postcss-px2rem   

下载 postcss-pxtorem

npm install postcss postcss-pxtorem --save-dev

// postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

7、总结

哈哈没有总结