[前端]Vue.js 2.5 + cube-ui

博观而约取，厚积而薄发。

课程来源于mooc网：https://www.imooc.com/

课程地址：https://coding.imooc.com/learn/list/74.html 

感谢老师提供的学习机会 

 

目标：

1. 学会普通前端项目的环境搭建
2. 学会简单需求的适配网站开发
3. 学会比较流行的框架使用
4. 系统掌握Js Css的语法，特性，为以后的前端开发做好技术沉淀

 

一 准备工作

Node.js:

• 官网地址：https://nodejs.org/en/download/

vue-cli:

• github地址：https://github.com/vuejs/vue-cli
• 官网地址：https://cli.vuejs.org/
• 官方文档地址：https://cli.vuejs.org/zh/guide/

cube-ui:

• github地址：https://github.com/didi/cube-ui
• 官网地址：https://didi.github.io/cube-ui/#/zh-CN
• 官方文档地址：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
• 插件：https://github.com/cube-ui/vue-cli-plugin-cube-ui

 

二 安装

系统环境

• windows 10 64

Node.js:

1. 下载安装包
2. 安装教程：http://www.runoob.com/nodejs/nodejs-install-setup.html
3. 注意事项：选哪个都没关系

vue-cli:

1. 安装教程：https://cli.vuejs.org/zh/guide/installation.html\
2. 如果想要在制定目录中创建项目，记得先CD过去
3. 创建项目：vue create [项目名称]   //会提示是否使用淘宝镜像，用呗
4. default 默认 Maually 手动选择（加粗为选中项）
   1. 手动配置项目：

      项目一句话解释

      项目名称	解释
      Babel
      TypeScript
      Progressive Web App (PWA) Support
      Router	交互
      Vuex
      Css Pre=processors
      Linter / Formatter	空格检查器
      Unit Testing
      E2E Testing

   2. 预处理器的使用：

      预处理器的选择

      预处理器	解释
      SCSS/SASS
      Less
      Stylus

   3. ESL的规则：

      ESL的规则

      ESLint with error prevention only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint = Prettier

   4. 保存时Link  / 提交时Link

   5. 相应文件中  / Package.json中

   6. 是否保存预设 否

5. 安装依赖 如果一直下载不起来，就是一定要用淘宝镜像npm install-g cnpm --registry=https://registry.npm.taobao.org
6. 运行一定要记得进入项目路径 npm run serve
7. http://localhost:8080/ 成功

cube-ui:

1. 在项目路径下 ： vue add cube-ui
2. 使用后编译？减少构建包体积  Y
3. 部分引用 全部应用
4. 自定义主题 Y
5. 使用rem  N
6. 使用vw N

目录结构

• node_modules : 依赖的一些包
• public
  • favicon.ico
  • index.html:项目的入口 编译构建后引用main.js
• src
  • assets
  • components
  • App.vue
  • main.js:入口Js 
• .browserslistrc  兼容哪些浏览器 CSS兼容性问题 autoprefix插件使用的
• .eslintrc.js eslint的配置 写模板的时候插件 根据需求定制化rulers
• .gitignore  git配置
• babel.config.js 预设
• package.json  项目描述和依赖 辅助开发插件 npm serve 是在这里配置的
• package-lock.json 锁版本功能
• postcss.config.js  css的一些设置
• README.md

三 文档阅读

vue-cli:

cube-ui:

 

四 数据准备

从源码里拷贝出data.json即可，修改vueconfig.js添加Api接口