vue webpack vuetify 项目构建

安装好nodjs

安装好npm

安装好vue

npm intstall vue

通过webpack构建项目

vue init webpack vuetify-test

vuetify-test:项目所在的文件夹

随后的选项选择默认操作即可 eslint 默认开启以后格式检查会比较严格.

? Project name vuetify-test
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
以上默认选项

以下根据需求处理
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

切换到项目目录安装vuetify

cd vuetify-test
npm install vuetify

 安装sass 及 sass-loader

npm install sass sass-loader deepmerge -D

安装离线图标

npm install @mdi/font --save

配置sass-loader

在下图所示的文件webpack.bas.conf.js

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

// options 根据 sass-loader版本选择一个即可

创建vutify插件
目录:// src/plugins/vuetify.js


import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {
    icons :{
        iconfont :'mdi',
    }
 }
export default new Vuetify(opts)

导航到主入口点，在那里实例化 Vue 实例并将 Vuetify 对象作为选项传递进来。

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

通过上述方式,vue 结合vuetify 完成

配置文件说明:

系统的全局配置文件位于:config

dev.env.js 开发环境配置文件

prod.env.js 生产环境配置文件

dev.env.js 包含了prod.env.js的内容,并可以对相关的变量进行覆盖.

引用相关的变量配置通过

process.env.配置的属性名称即可引用

index.js 容器的配置文件(包括端口号,访问前缀,以及相关的配置参数)

 

项目发布时需指定使用哪个文件作为配置.

在package.json    

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
==>
    "dev": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",

 关于和spring boot整合的注意事项.

spring配置关键项

server.servlet.context-path=/

spring.resources.add-mappings=true

spring.mvc.static-path-pattern=/static/**
spring.resources.static-locations=classpath:/static/


vue 打包后的文件 static 内容放入 spring boot resource 目录下的 static 目录.
index.html放入 static 目录.

vue后台请求路径参考如下:

'use strict'

module.exports = {
  NODE_ENV: '"production"',
  api: '"/api"',
  auth_api : '"/auth-api"',
  baseHome : '"/home"',
  access_token: '"ACCESS_TOKEN"',
  user_info: '"user_info"',


  debug: {
    mock: true, // enable mock
    http: true // http request log
  },
}

 添加控制类配置

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {

	private static Logger log = LoggerFactory.getLogger(InterceptorConfig.class);
	//@Override
    public void addInterceptors(InterceptorRegistry registry) {
    	
    	log.debug("Registry interceptor !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!" );
        registry.addInterceptor(authenticationInterceptor())
                .addPathPatterns("/**");   
        /*registry.addInterceptor(logInterceptor())
        .addPathPatterns("/**");  */ 
    }
    @Bean
    public AuthenticationInterceptor authenticationInterceptor() {
        return new AuthenticationInterceptor();
    }
    
    
    // 增加关键的控制
    
    //@Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addRedirectViewController("/", "/index.html");
        registry.addRedirectViewController("/index", "/index.html");
    }
}