爱记录

【----------【一.vue的安装】----------】

1.安装全局vuecli命令包

npm install -g @vue/cli-service-global

2.创建一个项目,vue-less

vue create vue-less

3.运行项目

cd vue-less

npm run serve/yarn serve

4.其他

图形化安装插件

vue ui

导入项目

【----------【二.vue配置less】----------】

1.下载

npm install --save less less-loader

2.在main.js引入

import less from 'less'

Vue.use(less)

3.使用方法

style lang="less"

【----------【三.less实例】----------】

访问示例https://app.ijilu.cn/vue-less/dist/

【----------【四.less其他使用方式】----------】

1.基础方式(1).全局安装less,基于nodejs,在命令行将less转化成css可用样式文件

npm install -g less

lessc styles.less styles.css

2.基础方式(2).安装压缩插件可以最小化文件

npm install -g less-plugin-clean-css

lessc --clean-css styles.less styles.min.css

3.引入文件方式:

link rel="stylesheet/less" type="text/css" href="styles.less"

less.min.js

【----------【五.vue配置VueRouter】----------】

1.下载

npm install vue-router --save

2.在main.js引入

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.配置History模式-前端

在main.js修改

const router = new VueRouter({

// History 模式

mode: 'history',

base:'/vue-less/dist/',

routes

})

根目录新建vue.config.js

添加publicPath: process.env.NODE_ENV === 'production' ? '/vue-less/dist/' : '/'

4.配置History模式-后台nginx

location /vue-less {

root /var/ijilu_cn/app;

index index.html index.htm;

try_files $uri /vue-less/dist/index.html;

}

5报错解决方法

配置文件加入runtimeCompiler: true,//使用template导致runtime-only报错解决办法

使用template导致runtime-only报错解决办法

【----------【六.vue配置element-ui】----------】

1.下载

npm i element-ui -S

2.在main.js引入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

【----------【七.部署配置】----------】

1.修改部署路径

根目录新建vue.config.js

添加publicPath: process.env.NODE_ENV === 'production' ? '/vue-less/dist/' : '/'

2.配置History模式

配置History模式-后台nginx,解决线上环境在浏览器地址栏回车的问题

location /vue-less {

root /var/ijilu_cn/app;

index index.html index.htm;

try_files $uri /vue-less/dist/index.html;

}

访问示例https://app.ijilu.cn/vue-less/dist/

【----------【八.其他-接口跨域访问】----------】

在vue.config.js配置devServer.proxy

配置转发代理https://cli.vuejs.org/zh/config/#devserver-proxy

【----------【九.参考资料】----------】

less官网http://lesscss.org/

vue官网https://cn.vuejs.org/

vue-router官网https://router.vuejs.org/

vue-cli官网https://cli.vuejs.org/

element-ui官网https://element.eleme.cn/

屏幕缩放插件postcss-px-to-viewport

蓝湖

【----------【十.解决yarn build vue打包文件太大的问题】----------】

核心点是多次yarn serve重启,会有缓存导致配置成功也报错

参考文档http://www.zyiz.net/tech/detail-139472.html

vue.config.js里面写

configureWebpack: {

externals: {

'element-ui': 'ELEMENT',

'vue': 'Vue',

'vue-router': 'VueRouter',

'axios': 'axios',

'less': 'less',

}

}

/public/index.html里面写,摆在最下面

src="vue.min.js"

src="vue-router.min.js"

src="element-ui/lib/index.js"

src="axios.min.js"