「Vue学习记录一」开发环境准备

1.开发工具 - VS Code

选择 VS Code 是因为这是一款很容易上手的工具，在 VS Code 中找到的每个功能都完成一项出色的工作，构建了一些简单的功能集，包括语法高亮、智能补全、集成 git 和编辑器内置调试工具等，将使你开发更高效。

下载地址

官网： https://code.visualstudio.com/

推荐插件

• Vetur —— 语法高亮、智能感知、Emmet 等
• Vue VSCode Snippets —— 快速生成 Vue 模板
• EsLint—— 语法纠错
• Auto Close Tag —— 自动闭合 HTML/XML 标签
• Auto Rename Tag —— 自动完成另一侧标签的同步修改
• Path Intellisense —— 自动路劲补全
• Bracket Pair Colorizer —— 为代码中的括号添上一抹亮色

您可以在这里找到有关扩展的文档:

https://code.visualstudio.com/docs/extensions/overview

2.安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。

下载地址

官网： https://nodejs.org/en/ （一路 next 即可）

安装完可在控制台查看 node、npm 对应版本

node -v
npm -v

永久使用淘宝镜像命令：

npm config set registry https://registry.npm.taobao.org

3.安装 vue-devtools

vue-devtools 是一款基于 chrome 浏览器的插件，用于调试 vue 应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下 vue-devtools 的安装。

安装方式

方式一：chrome 商店直接安装

vue-devtools 可以从 chrome 商店直接下载安装

方式二：手动安装

① 找到 vue-devtools 的 github 项目，并将其 clone 到本地. vue-devtools

   git clone https://github.com/vuejs/vue-devtools.git

② 安装项目所需要的 npm 包

    npm install

③ 编译项目文件

    npm run build

④ 添加至 chrome 浏览器

浏览器输入地址"chrome://extensions/"进入扩展程序页面点击"加载已解压的扩展程序..."按钮，选择 vue-devtools>shells 下的 chrome 文件夹。

如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。

方式二：提供一个 4.1.4 版本的下载地址

链接：https://pan.baidu.com/s/1B1QhnXBvVLnuSFrnDYbs5A

提取码：rq9c

提示

打开 chrome 的扩展程序，将下载的文件拖进去，就可以安装了。

安装成功如下图

vue-devtools 使用

安装后, 需要关闭浏览器, 再重新打开, 才能使用

浏览器打开 vue 项目后, 按 F12, 选择 vue 就可以使用了.vue 是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试

4.vue-cli 安装及使用

安装 vue-cli

 npm install @vue/cli -g

创建一个项目

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

具体操作如下：

1.选择一个 preset（预设）

① 除最后两个选项，其他选项都是你之前保存的预设配置（如下图第一个 " my-default " 是之前保存的预设配置，现在就可以直接用了）

② 如果没有配置保存过，则只有以下两个选项：

default（babel，eslint）：默认设置（直接 enter）适合快速创建一个新项目的原型，没有带任何辅助功能的 npm 包
Manually select features：自定义配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

2.自定义配置需要选择你需要的配置项

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

3. 选择对应功能的具体工具包

① 是否使用 history router

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

② css 预处理器

主要为 css 解决浏览器兼容、简化 CSS 代码   等问题

③ ESLint：

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

④ 何时检测：在保存或提交时 进行 link 检查

单元测试

? Pick a unit testing solution: (Use arrow keys)
  Mocha + Chai   //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
 > Jest   //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

⑤ 如何存放配置 ：

⑥ 是否保存本次配置（y:记录本次配置，然后需要你起个名; n：不记录本次配置）

⑦ 搭建完成:按照提示启动项目

可视化项目

vue ui

目录结构

|-- src             // 源码目录

|  |-- components   // vue公共组件

|  |-- router       // vue的路由管理

|  |-- App.vue      // 页面入口文件

|  |-- main.js      // 程序入口文件，加载各种公共组件

|-- public          // 静态文件，比如一些图片，json数据等

|  |-- favicon.ico   // 图标文件

|  |-- index.html   // 入口页面

|-- vue.config.js    // 是一个可选的配置文件，包含了大部分的vue项目配置

|-- .babelrc        // ES6语法编译配置

|-- .editorconfig   // 定义代码格式

|-- .gitignore      // git上传需要忽略的文件格式

|-- .postcsssrc     // postcss配置文件

|-- README.md       // 项目说明

|-- package.json    // 项目基本信息,包依赖信息等

根据需要在根目录下新建 vue.config.js 自行配置，eg：（简单配置，更多配置详情参见官网：https://cli.vuejs.org/zh/config/）

module.exports = {
  baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {//除了 entry 之外都是可选的
      entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
      template: 'public/index.html',// 模板来源
      filename: 'index.html',// 在 dist/index.html 的输出
      title: 'Index Page',// 当使用 title 选项时,在 template 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
    subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
  },
  lintOnSave: true,// 是否在保存的时候检查
  productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
  css: {
    extract: true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {},// css预设器配置项
    modules: false// 启用 CSS modules for all css / pre-processor files.
  },
  devServer: {// 环境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
};

vue 相关依赖的安装命令

npm install axios --save-dev //安装axios
npm install mockjs --save-dev   //安装mockjs
npm install vue-lazyload --save-dev    //安装 vue-lazyload
npm install vue-cookie --save-dev     //安装vue-cookie
npm install element-ui --save-dev   //安装 element-ui
npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev  //一次安装多个依赖