Vue.js学习笔记01：Vue基础

Vue3文档：https://v3.cn.vuejs.org/guide/installation.html

Vue介绍

Vue.js是什么

官方给出的介绍如下：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Node.js的安装

npm是Node.js的一个命令，因此需要先安装Node.js。

可以到Node.js官网下载最新版本的安装包，然后直接一键式安装即可。

若对最新特性没有要求，推荐LTS版本。

安装后在命令行输入：

npm -v

能看到版本信息则为安装完成。

注：如果提示命令无效，可能需要重启计算机。

Node.js换源

对于中国大陆用户，npm官方源的速度可能会过慢，因此推荐将npm源设置为国内镜像。

关于国内可用的镜像、如何换源等问题，可以参考：npmmirror 中国镜像站

Vue安装或构建

Vue安装

对于已有项目引入Vue，官方提供了4种安装方式，可以根据需求的不同进行选择。包括：

1. 在页面上以CDN包的形式导入。
2. 下载JavaScript文件并自行托管。
3. 使用npm安装它。
4. 使用官方的CLI来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

考虑到日后要和各种框架模块整合，npm的安装方式可以很好的和诸如webpack或Rollup模块打包器配合使用，因此我这里使用的是npm的安装方式。

Vue的安装（npm）

在项目目录打开命令行，安装最新稳定版的命令是：

# 最新稳定版
npm install vue@next

Vue还提供了编写单文件组件的配套工具。如果想使用单文件组件，那么还需要安装@vue/compiler-sfc：

npm install -D @vue/compiler-sfc

Vue2和Vue3的区别，请注意 @vue/compiler-sfc 替换掉了 vue-template-compiler

除了@vue/compiler-sfc之外，你还需要为已选择的打包工具选择一个配套的单文件组件loader或plugin。

Vue构建

命令行工具（CLI）安装

除了在已有项目引入Vue，还可以直接通过官方提供的CLI，为单页面应用（SPA）快速搭建繁杂的脚手架。它为现代前端工作流提供了功能齐备的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时lint校验，以及生产环境可用的构建版本。

要安装Vue CLI，npm命令为：

npm install -g @vue/cli

CLI必须在全局下安装

脚手架搭建

首先cd进存放项目的目录，然后运行命令：

vue init webpack <文件夹名称>

该命令会初始化一个项目，其中webpack是构建工具，即整个项目是基于webpack的。其中<文件夹名称>是整个项目文件夹的名称，这个文件夹会自动生成在当前目录下。

在输入完上述命令后，会询问几个简单的问题：

• Project name：项目名称。如果不需要更改直接回车就可以了；

  • 注意：这里不能使用大写。

• Project description：项目描述；

  • 默认为A Vue.js project。

• Author：作者；

  • 如果你有配置Git的作者，他会读取。如果没有，则默认计算机用户名。

• Vue build：构建方式；

  • 建议选择Runtime + Compiler：recommended for most users，适合绝大多数用户。

• Install vue-router?：是否安装vue的路由插件；

  • 建议Y。

• Use ESLint to lint your code?：是否用ESLint来限制你的代码错误和风格；

  • 建议N，因为Y在调试项目时，控制台会有很多黄色警告提示格式不规范，但并不影响项目。

• Set up unit tests?：是否安装单元测试；

  • 建议N。

• Setup e2e tests with Nightwatch?：是否安装e2e来进行用户行为模拟测试；

  • 建议N。

• Should we run ‘npm install’ for you after the project has been created? (recommended)：项目创建后是否要为你运行“npm install”？这里选择包管理工具。

  • 建议yes use npm。

回答完上述问题后，等待一会，就会显示创建项目创建成功，如：

added 1274 packages, and audited 1275 packages in 1m

68 packages are looking for funding
  run `npm fund` for details

80 vulnerabilities (52 moderate, 23 high, 5 critical)

To address issues that do not require attention, run：
  npm audit fix

To address all issues (including breaking changes), run：
  npm audit fix --force

Run `npm audit` for details.

# Project initialization finished!
# ========================

To get started：

cd VueSSM
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

接下来就可以去刚才设置的目录下看是否已经创建文件，介绍一下目录文件及其作用：

• build：最终发布的代码的存放位置。

• config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

• node_modules：npm 加载的项目所需要的各种依赖模块。

• src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

  • assets：放置一些图片，如logo等

  • components：目录里放的是一个个的组件文件

  • router

    • index.js配置路由的地方

  • App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的必不可少。

  • main.js：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

• static：静态资源目录，如图片、字体等。

• test：初始测试目录，可删除

• .XXXX文件：配置文件。

• index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

• package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

• README.md：项目的说明文件。

• .babelrc：是检测es6语法的文件的配置

• .getignore：忽略文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

• .postcssrc.js：前缀的配置

• .eslintrc.js：配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

• .eslintignore：忽略eslint对项目某些文件的语法规则的检查

• webpack.config.js：webpack的配置文件，把.vue的文件打包成浏览器能读懂的文件。

最后就可以使用HBuilderX、IDEA、VS Code等来运行这个项目了，当然也可以在命令窗口运行，运行命令：

npm run dev