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");
}
}