Vue2.x项目搭建过程

项目初始化工作

1、项目生态

技术	描述
vue	2.6.x
vue-router	3.5.x
vuex	3.6.x
axios	0.26.x
element-ui	2.15.x
tailwindcss	npm:@tailwindcss/postcss7-compat@^2.2.17
i18n
font-awesome
mock
echart

2、创建项目 安装依赖

创建项目

$ vue create app01vuex

安装依赖

$ npm install axios vue-router@3.5.3 vuex@3.6.2 element-ui -S

安装tailwindcss

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3、初始化组件

① 路由组件

位置：src/router/index.js

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
    routes
}) 

export default router

main.js中注册

...
import router from "./router"	// 1
...
new Vue({
    router,					// 2
    render: h => h(App)
}).$mount("#app")

② 网络组件

位置：src/utils/http.js

import Vue from "vue"
import axios from "axios"

const instance = axios.create({
    baseURL: "http://localhost:3000/brandapi"
})

instance.interceptors.request.use( request => {
    return request
})

instance.interceptors.response.use(response => {
    return response.data
})

Vue.prototype.$http = instance

export default instance

main.js中引入执行

...
import './utils/http'
...

③ 状态组件

位置：src/store/index.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getter:{}
})

export default store

main.js中注册

...
import store from "./store"		// 1
...
new Vue({
    store,						// 2
    router,
    render: h=> h(App)
}).$mount("#app")

④ tailwindcss

执行命令：生成配置文件项目app01vuex/tailwind.config.js

$ npx tailwindcss init
# npx tailwind init

编辑配置文件tailwind.config.js：可以复制粘贴

module.exports = {
  mode: 'jit',				// 1、启用jit模式，开发人员可以自定义尺寸
  purge: [
    './src/**/*.html',
    './src/**/*.vue',		//	2、启动vue组件扫描
    './src/**/*.js',
  ],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

编辑项目配置文件：app01vuex/vue.config.js，添加加载器支持：可以复制粘贴

module.exports = ({
  css: {
    loaderOptions: {
      postcss: {
          postcssOptions: {
            plugins: [
                        require('tailwindcss'), 
                        require('autoprefixer')
                      ]
          }
      }
    },
  }
})

位置：创建一个通用样式：src/assets/tailwind.css：可以复制粘贴

@tailwind base;
@tailwind components;
@tailwind utilities;

main.js中引入执行

...
import './assets/tailwind.css'
...

⑤ element-ui

位置：src/utils/element.js

import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.use(ElementUI)

main.js中执行

...
import './utils/element.js'
...

3、项目组件创建和功能开发

此处省略…

员可以自定义尺寸
purge: [
‘./src//*.html’,
'./src//.vue’, // 2、启动vue组件扫描
'./src/**/.js’,
],
content: [],
theme: {
extend: {},
},
plugins: [],
}

编辑项目配置文件：`app01vuex/vue.config.js`，添加加载器支持：可以复制粘贴

```js
module.exports = ({
  css: {
    loaderOptions: {
      postcss: {
          postcssOptions: {
            plugins: [
                        require('tailwindcss'), 
                        require('autoprefixer')
                      ]
          }
      }
    },
  }
})

位置：创建一个通用样式：src/assets/tailwind.css：可以复制粘贴

@tailwind base;
@tailwind components;
@tailwind utilities;

main.js中引入执行

...
import './assets/tailwind.css'
...

⑤ element-ui

位置：src/utils/element.js

import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.use(ElementUI)

main.js中执行

...
import './utils/element.js'
...

3、项目组件创建和功能开发

此处省略…