VUE

1、安装nodejs和npm安装vue

安装nodejs：https://nodejs.org/en/download/

npm（Node Package Manager）node 依赖包管理

安装vue

npm install vue

全局安装vue cli

npm install -g @vue/cli 

CMD命令，分别输入node -v 和 npm -v 分别查看node和npm的版本号，输入vue查看是否安装成功

2、搭建vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project【vue create projectName】
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

　　

3、package.json 文件配置说明

1、在每个前端项目中，package.json 作为前端的大管家，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。

2、执行 npm install（yarn install）命令来安装项目所需的依赖文件，当执行该命令时，就会根据 package.json 文件中的配置信息来自动下载所需的模块，也就是配置项目所需的运行和开发环境。

3、package.json 中最重要的两个字段就是 name 和 version，它们都是必须的，如果没有，就无法正常执行 npm install 命令。npm 规定 package.json 文件是由名称和版本号作为唯一标识符的。

scripts：执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”。

4、项目目录

public：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack（vue-cli依赖的打包工具）。需要通过绝对路径来引用它们。

　　　　只需要关注public/index.html这个文件，它会在构建过程中被注入处理后的 JavaScript 和 CSS 等的资源链接。同时，它也提供了 Vue 实例挂载的目标。

src 下面的目录结构:

• main.js：默认为整个项目的入口文件。
• App.vue：是项目的主组件，页面的入口文件。
• assets：静态资源存放目录，和 public 目录不同的是这个目录会被打包处理，需要使用相对路径进行引用。
• components：组件存放目录，项目的公共组件可以存放在此供其他地方使用。
• router：路由配置文件
• views：写组件的文件夹
• style：写样式的文件夹

ES Module

　　JavaScript 模块化规范，ES Module把一个文件当作一个模块，每个模块有自己的独立作用域

Vue 单文件组件规范

　　.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>。最后他们将组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。在main.js中，这个被导入并使用的对象是来自APP.vue。

• 每个 .vue 文件最多包含一个 <template> 块。
• <template> 块只能有一个根元素。

• 每个 .vue 文件最多包含一个 <script> 块。

• 一个 .vue 文件可以包含多个 <style> 标签。

Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点.

v-model指令可以实现数据的双向绑定

 

 

 

如果命名没有问题，修改配置项,关闭语法检查。在vue.config.js加上一句：lintOnSave:false，重新启动一次npm run serve即可　　

执行以下命令（可以自动修复这些问题 warning Delete `␍` prettier/prettier）：

npm run lint --fix