vue初步搭建及优化

创建项目

安装
npm install -g @vue/cli
创建项目
vue init webpack admin//基于webpack创建admin 项目
复制代码

目录结构

static放静态资源 json数据 
src/main.js 项目入口文件
/App.vue 原始跟组件
router/index.js 路由
components 放组件
assets 放图片

./config 目录
Index.js 基础信息
dev.env.js 开发环境
Prod.env.js 线上环境配置
build webpack配置内容
复制代码

引入stylus

在main.js中引入公共的css文件
npm install stylus —save
npm install stylus-loader —save
<style lang=“stylus” scoped></style>

创建变量
在styles 文件夹内创建 var.styl
$bgColor = red;
ellipsis()
overflow: hidden
white-space: nowrap
text-overflow: ellipsis

引入
@import ‘../../../assets/styles/var.styl’
引入
.a >>> .b //样式穿透
.a 
    Color $bgcolor
    Ellipsis()
复制代码

iconfont 引用

iconfont.eat iconfont.svg iconfont.ttf iconfont.woff iconfont.css
在 src/assct/styles/
创建iconfont 把字体文件放入
然后放入iconfont.css
打开iconfont.css 更改路径
然后在main.js 引入
import ‘./assets/styles/iconfont.css'
复制代码

引入文件路劲优化

1.css引入优化
@import ‘../../../assets/styles/var.styl’
改成 @import ‘~@/assets/styles/var.styl’
2.修改快捷引入 webpack.base.conf.js
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
Ya
}
配置后  即可修改为 import ‘~styles/var.styl’
样式内引入样式 需要加一个~   一般不用加
复制代码

去掉路径中的#

在route中index.js 中配置
const router = new VueRouter({ mode: 'history', routes: [...] })
复制代码

转载于:https://juejin.im/post/5be98a3751882517d4123e28