每日总结 前端学习第二天

登录页面视频学习

-vue-cli 4.0 项目框架搭建

1. 卸载旧版本 vue-cli框架

npm uninstall vue-cli -g

2. Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本）。下载安装nodeJs，中文官方下载地址：http://nodejs.cn/download/安装新版本之前需要卸载旧版本node.js

3. 安装@vue/cli（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）

cnpm install -g @vue/cli //yarn global add @vue/cli
https://cli.vuejs.org/zh/guide/installation.html

4.搭建项目
运行以下命令来创建一个新项目：

vue create hello-world（项目名称）

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

1️⃣ 除最后两个，其他选项都是你此前保存的预设配置（如下图第一个“ my-default”是我之前保存的预设配置，如今便可以直接用了）
default（babel，eslint）：默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包
Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

手动选择需要添加的配置项：选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的（方便遇到问题时百度），简介如下

1 ? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
2 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
5 ( ) Router // vue-router（vue路由）
6 ( ) Vuex // vuex（vue的状态管理模式）
7 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
8 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
9 ( ) Unit Testing // 单元测试（unit tests）
10 ( ) E2E Testing // e2e（end to end） 测试

2️⃣是否使用history router：这里我选择的是NO

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

3️⃣css预处理器：主要为css解决浏览器兼容、简化CSS代码 等问题
我常用less，所则的是less

4️⃣ESLint：提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多

5️⃣何时检测：

6️⃣如何存放配置 ：
In dedicated config files (分别存放配置文件)
In package.josn (放入此文件夹)

7️⃣生成项目：

项目生成完毕。。。

⑧ 运行项目并在浏览器查看：