关于vue-cli:Vue学习记录一开发环境准备

5次阅读

共计 4619 个字符，预计需要花费 12 分钟才能阅读完成。

抉择 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

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

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

node -v
npm -v

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

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 我的项目后, 按 F12, 抉择 vue 就能够应用了.vue 是数据驱动的, 这样就能看到对应数据了, 不便咱们进行调试

 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    // 我的项目根本信息, 包依赖信息等

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: {// 第三方插件配置
    // ...
  }
};

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  // 一次装置多个依赖

正文完

vue-cli

发表至： vue-cli

2020-09-11

0

关于vue-cli:vueconfigjs常用配置

关于vue-cli:vuecli4版本如何快速优化性能

关于vue-cli:Vue学习记录一开发环境准备

关于vue-cli:Vue环境搭建

关于javascript:浏览器缓存机制

关于vue-cli:Vue学习记录一开发环境准备

1. 开发工具 – VS Code

下载地址

举荐插件

2. 装置 Node.js

下载地址

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

永恒应用淘宝镜像命令：

3. 装置 vue-devtools

装置形式

形式一：chrome 商店间接装置

形式二：手动装置

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

② 装置我的项目所须要的 npm 包

③ 编译我的项目文件

④ 增加至 chrome 浏览器

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

vue-devtools 应用

4.vue-cli 装置及应用

装置 vue-cli

创立一个我的项目

具体操作如下：

1. 抉择一个 preset（预设）

2. 自定义配置须要抉择你须要的配置项

3. 抉择对应性能的具体工具包

可视化我的项目

目录构造

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

vue 相干依赖的装置命令

站内搜索