爱记录

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

1.安装全局vuecli命令包

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

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

vue create vue-sass

3.运行项目

cd vue-sass

npm run serve/yarn serve

4.其他

图形化安装插件

vue ui

导入项目

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

1.下载

cnpm install sass-loader sass webpack --save-dev

2.使用sass-loader编译sass

sass-loader

3.新建webpack.config.js

配置参考

use: [

// Creates `style` nodes from JS strings

"style-loader",

// Translates CSS into CommonJS

"css-loader",

// Compiles Sass to CSS

"sass-loader",

],

4.使用方法

script标签下引入样式文件,导入js的模式

import "./app.scss";

scoped使用方法

style标签上 scoped lang="scss"

scoped使用方法

style标签上 scoped lang="scss"

@import "App.scss";

【----------【三.sass实例】----------】

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

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

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

npm install -g sass

sass app.scss app.css

2.watch一个文件即时更新:

sass --watch app.scss app.css

3.watch整个文件夹方式:

在src上层目录输入命令

sass --watch src:public/css

【----------【五.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-sass/dist/',

routes

})

根目录新建vue.config.js

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

4.配置History模式-后台nginx

location /vue-sass {

root /var/ijilu_cn/app;

index index.html index.htm;

try_files $uri /vue-sass/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-sass/dist/' : '/'

2.配置History模式

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

location /vue-sass {

root /var/ijilu_cn/app;

index index.html index.htm;

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

}

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

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

在vue.config.js配置devServer.proxy

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

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

sass官网https://sass-lang.com/guide

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',

}

}

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

src="vue.min.js"

src="vue-router.min.js"

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

src="axios.min.js"