[JavaScript知识库]vue快速搭建项目

1. 安装脚手架

• 安装老版本脚手架：
  适用于1.x和2.x项目的构建 $ npm install vue-cli -g
• 安装新版本脚手架（推荐）：
  适用于2.x和3.x项目的构建 $ npm install @vue/cli -g

2. 创建项目 安装依赖

• vue create app01vuex(项目名称)

  ?

3. 安装依赖

• $ 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

4. Tailwindcss

创建配置文件：项目中生成一个配置文件`tailwind.config.js`
	npx tailwindcss init
编辑配置文件信息：
	module.exports = {
	  mode: 'jit',				// 1、启用jit模式，开发人员可以自定义尺寸
	  purge: [
	    './src/**/*.html',
	    './src/**/*.vue',		//	2、启动vue组件扫描
	    './src/**/*.js',
	  ],
	  content: [],
	  theme: {
	    extend: {},
	  },
	  plugins: [],
	}
编辑`Vue`应用配置文件`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`中引入`tailwind.css`：
	import Vue from 'vue'
	import App from './App.vue'
	import './assets/tailwind.css'		// 引入tailwindcss
	
	Vue.config.productionTip = false
	
	new Vue({
	  render: h => h(App),
	}).$mount('#app')

5.路由组件

位置：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")

6.axios封装-网络组件

位置：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'

...

7.状态组件-vuex

位置：src/store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters:{},
    modules:{
        //分模块管理，但要有命名空间
    }
})

export default store

main.js中注册

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

8.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'
...