Vue-Cli & VueDevTools安装
本小节我们会介绍 Vue 脚手架工具 Vue-Cli
以及调试工具 VueDevTools
的安装和使用。
vue-cli
是由 Vue
提供的官方 cli,专门为单应用搭建繁杂的脚手架。它是用于 vue.js+webpack 的项目模板。
// npm 安装
npm install -g @vue/cli
// yarn 安装
yarn global add @vue/cli
查看是否安装成功:
vue -V
// 正确版本号
vue create vue-learn
回车之后会出现以下画面
Vue CLI v3.9.3
┌────────────────────────────┐
│ Update available: 3.10.0 │
└────────────────────────────┘
? Please pick a preset: (Use arrow keys)
? default (babel, eslint)
Manually select features
Vue CLI v3.9.3
┌────────────────────────────┐
│ Update available: 3.10.0 │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
?? Babel
? TypeScript
? Progressive Web App (PWA) Support
? Router
? Vuex
? CSS Pre-processors
? Linter / Formatter
? Unit Testing
? E2E Testing
依然是上下键选择,空格键选中。
对于每一项的,此处做个简单描述:
第 typescript 暂时还不会,先不选,这次选择常用的。
? Babel
? TypeScript
? Progressive Web App (PWA) Support
? Router
? Vuex
? CSS Pre-processors
? Linter / Formatter
?? Unit Testing
? E2E Testing
回车之后让选择 CSS 处理器,这里选择 Less。
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
? Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
接下来选择 eslink,我选择了 eslink+prettier:
? Pick a linter / formatter con:
ESLint with error prevention only
ESLint + Airbnb con
ESLint + Standard con
? ESLint + Prettier
选择检查方式,第是保存的时候就检查,第二个是提交的时候才检查。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
?? Lint on save
? Lint and fix on commit
选择单元测试,这个我不懂,随便先选个 jest:
? Pick a unit testing solution:
Mocha + Chai
? Jest
存放的地方,选择 package.json:
? Where do you prefer placing con for Babel, PostCSS, ESLint, etc.?
In dedicated con files
? In package.json
是否保存这次配置,方便下次直接使用,一般都是选择 Y。
? Save this as a preset for future projects? (y/N)
配置完成之后就开始创建初始项目了:
启动
cd vue-learn
npm run serve
vue-devtools 是一款基于 chrome 游览器的,用于调试 vue 应用,这可以极大地提高我们的调试效率。
chrome 商店直接安装
vue-devtools 可以从 chrome 商店直接下载安装。我们可以打开 chrome 商店, vue-dev-tools,点击 “至 chrome” 即可。
手动安装
将 vue-devtools 克隆到本地。
git clone https://github.com/vuejs/vue-devtools.git
安装项目所需要的安装包
npm install
编译项目
npm run build
至 chrome 浏览器
、游览器输入地址“chrome://extensions/” 进入扩展程序,
、点击“加载已解压的扩展程序...”按钮
、选择vue-devtools>shells下的chrome夹。
当我们完 vue-devtools 扩展程序之后,我们在调试 vue 应用的时候,chrome 开发者工具中会看 vue 的一栏,点击之后就可以看见 vue 对象的一些信息。vue-devtools 使用起来还是比较简单的,上手非常地容易。
在本小节我们介绍了什么是 vue-cli
,如何安装 vue-cli
。介绍了调试工具 VueDevTools
的安装和使用。