02-vue项目准备

1 项目结构

 |-- build : webpack 相关的配置文件夹(基本不需要修改)

|-- config: webpack

相关的配置文件夹(基本不需要修改)

|-- index.js:

指定的后台服务的端口号和静态资源文件夹

|-- node_modules

|-- src :

源码文件夹

|-- main.js: 应用入口 js

|-- static:

静态资源文件夹

|-- .babelrc: babel 的配置文件

|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置

|-- .eslintignore: eslint 检查忽略的配置

|-- .eslintrc.js: eslint 检查的配置

|-- .gitignore: git 版本管制忽略的配置

|-- index.html: 主页面文件

|-- package.json: 应用包配置文件

|-- README.md: 应用描述说明的 readme 文件

2 使用字体库

目前国内用的最多的是阿里巴巴矢量库（http://www.iconfont.cn/），注册用户登录后；

创建自定义项目；

然后选中字体图标到购物车后，点击购物车，点击“添加至项目”， 我用的是这个

https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=13547

项目中可以引用css字体库，//at.alicdn.com/t/font_983381_cqucs5xbbxv.css

3 stylus

当前主流的三种 css 预编译器1) Less 2) Sass 3) Stylus

3.1 在vue-cli项目引用

cnpm install stylus stylus-loader --save-dev

3.2 在单个页面引用时使用

<style lang="stylus" rel="stylesheet/stylus">

3.3 stylus参考

中文参考网址：https://www.zhangxinxu.com/jq/stylus/

基本语法

A:结构化:

完全通过缩进控制, 不需要大括号和分号, 冒号是可选的

.abc

      color:red

B 父级引用

使用

字符&指向父选择器

C 变量

a. 定义变量: name=value 如: mainColor = #0982c1

b.

引用变量: name 如: color mainColor

c. name

可以没有前缀要求, 但最好以$开头(好识别)

D 混合(Mixins)

a.也就是预处器中的函数

b. 函数参数可以指定默认值

c. 某段 CSS 样式要用到多个元素上, 只有其中的 1,2 个样式值有变化

E 导入(import)

通过@import 引入其它样式文件

4 配置vue模板