VUE3.0学习笔记（一）-创建VUE项目

一、介绍-VUE CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

---

二、安装VUE CLI

1、全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g 

 注意：Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)

可以使用以下语句进行检查Node.js是否是v8.9以上版本：

node -v

如果版本是v8.9以上，则使用下面的语句进行安装VUE CLI：

npm install -g @vue/cli

安装完成后，可以按照下面的命令检查版本是否正确：

vue --version

---

 三、搭建VUE项目

 1.新建项目（记得要将命令行中的地址选择到自己需要搭建的文件夹中）

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

2.选择配置

（1）选择预设配置：

        如下图中的myVue3.0就是自己之前创建项目的时候保存的配置

       下面两个Default是项目中自己默认的配置，分为VUE 2版本和VUE 3版本

       “Manually select features”：自定义配置是我们做需要的面向生产的项目，提供可选功能的npm包

 （2）这里我们选择“Manually select features”，结果如下图：

下图中的选项为

 1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> 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） 测试

 （3）选择VUE版本（2.0或3.0）

 （4）是否使用Class风格装饰器？
      即原本是：home = new Vue()创建vue实例
      使用装饰器后为：class home extends Vue{}

 （5）使用babel与ts一期用于自动检测的填充？（一般选择y）

 （6）路由是否使用历史模式？这种模式充分利用history.pushState API来完成URL跳转无需重新加在页面（一般选择y）

（7）使用什么CSS预编译器？（我选择的stylus）

     A. dart-sass与node-sass的区别

• node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；
• dart-sass 是用 drat VM 来编译 sass；
• node-sass是自动编译实时的
• dart-sass需要保存后才会生效

   推荐 dart-sass 性能更好（也是 sass 官方使用的）

   B.Less

   是Leaner Style Sheets 的缩写， 是一门向后兼容的 CSS 扩展语言。

   这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

   C.Stylus

   stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件

 

 （8） ESLint：提供一个插件化的javascript代码检测工具

 （9）何时检测

 （10）如何存放配置

 （11）是否保存本次配置

 （12）新项目安装中

 安装成功，如下图

 

 

创建成功。