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

微信扫一扫,分享到朋友圈

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

微信扫一扫,分享到朋友圈

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

shell脚本中的4种循环语句使用

上一篇

回归老东家:Tyler“Ninja”Blevins与Twitch签订多年合约

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友