Vue3学习笔记-基础篇js版

一、简介

本篇仅记录学习vue3+ts的学习过程。

二、创建vue3项目

2.1、更新vue-cli工具

PS：node和vue-cli如何安装不在赘述。

vue3项目基于vue-cli工具创建需要使用版本更高的cli工具，在创建的时候需要先确认本机的cli工具的版本。本机电脑上的版本是4.5.8。

2.2、创建项目

# 创建项目
vue create vue3-demo

选择自定义选项后，按Enter键进入下一步。使用键盘上下移动，空格键确定当前选项。具体选择，如下图所示。

? Check the features needed for your project:

选项	注释
(*) Choose Vue version	// 视图版本
(*) Babel	// ES6代码转为ES5代码。
( ) TypeScript	// TypeScript是一个JavaScript（后缀.js）的超集（后 缀.ts）
( ) Progressive Web App (PWA) Support	// 渐进式Web应用程序
(*) Router	// vue-router路由
(*) Vuex	// vuex状态管理模式）
(*) CSS Pre-processors	// CSS 预处理器
(*) Linter / Formatter	// 代码风格检查和格式化
( ) Unit Testing	// 单元测试（程序员的角度测试）
( ) E2E Testing	// 测试（站在用户用

使用Enter键进入下一步，选择如下选项。具体参数说明

三、集成Ant Design of Vue（当前需注意ant版本，2.x才适配vue3）

Ant Design of Vue

使用下面的命令安装依赖

# 下载稳定版本
npm install ant-design-vue --save

# 使用这个命令下载2.x版本的工具
npm i --save ant-design-vue@next

确认下载的是如下的版本，目前使用下载最新稳定版本的话，下载的是1.7.2版本，该版本不适配vue3。

3.1、如何区分依赖到生产环境和开发环境？

部署到线上之后还会用得到的需要部署到生产环境；在代码编写，编译阶段需要用到的就可以放在开发环境。比如：router，这个在生产环境上也是会用到，那就要放到生产环境上去。像：eslint这个是在代码编写的时候做代码格式规范约束的，生产环境上是用不到的就不需要放到生产环境中；

3.2、vue.config.js文件

Vue CLI
vue3.0项目创建完后，默认不存在vue.config.js文件。在vue2.0中是存在的。这里可以自己去配置。

四、浏览器样式去除

4.1、下载normalize.scss文件

下载normalize.scss文件。

4.2、创建main.scss文件为项目css样式主入口文件

4.2、在vue.config.js中配置scss-loader

module.exports = {
  css: {
    loaderOptions: {
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: `@import "./src/styles/main.scss";`
      }
    }
  }
};

4.4、启动测试

在登陆界面上写上容易看出样式是否去除的无序列表。


可以看到增加了normalize.scss之后的区别如下图所示！

五、修改sass工具

5.1、卸载node-sass

npm uninstall node-sass -D

5.2、安装最新稳定版

npm install sass -D