搭建 Vue 项目

搭建一个 vue 项目需要环境和工具, 要做好环境准备和资源前置

nodejs 是当下前端工程化开发必不可少的环境, 使用 npm 功能来管理依赖包

$ node -v   查看node版本
$ npm  -v   查看npm版本

git 版本控制工具是目前最为流行的分布式版本管理工具，代码的 提交、检出、日志，都需要通过git完成

$ git --version 查看git安装版本

为了方便开发，提高开发效率，可以拉取 vue-element-admin 的基础模版

拉取基础项目模版

$ git clone 项目模版地址

安装项目依赖

$ npm install

启动项目

$ npm run dev

项目会生成一个基本的开发框架, 整个的目录结构

├── build                      # 构建相关
├── mock                     # 项目mock 模拟数据
├── public                    # 静态资源
│     │── favicon.ico      # favicon图标
│     └── index.html      # html模板
├── src                         # 源代码
│     ├── api                  # 所有请求
│     ├── assets            # 主题 字体等静态资源
│     ├── components   # 全局公用组件
│     ├── icons               # 项目所有 svg icons
│     ├── layout              # 全局 layout
│     ├── router              # 路由
│     ├── store               # 全局 store管理
│     ├── styles              # 全局样式
│     ├── utils                 # 全局公用方法
│     ├── vendor             # 公用vendor
│     ├── views               # views 所有页面
│     ├── App.vue           # 入口页面
│     ├── main.js             # 入口文件 加载组件 初始化等
│     ├── permission.js    # 权限管理
│     └── settings.js         # 配置文件
├── tests                        # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js                # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js            # vue-cli 配置
├── postcss.config.js      # postcss 配置
└── package.json           # package.json

Scss 处理器

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass 和 .scss 两种

不同:

scss 的编写规范基本和css一致,

sass 是有严格的缩进规范并且没有 ‘{}’ 和 ‘；’