Vue入门1 脚手架篇

脚手架篇

Vue CLI
官方创建项目的文档
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

安装

npm install  @vue/cli -g
# OR
yarn global add @vue/cli

检查其版本

vue --version

快速原型开发

使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发（单独跑一个组件看它的样式和逻辑）

npm install -g @vue/cli-service-global

创建一个项目

命令行方式

vue create hello-world
? Please pick a preset: (Use arrow keys)
❯  default (babel, eslint) 
   Manually select features 

选第二个 手动安装插件（空格可以选择y/n 上下切换选项）

? Check the features needed for your project: (Press  to select,  to t
oggle all,  to invert selection)
❯◉ Babel //babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router //路由
 ◉ Vuex  //信息存储
 ◉ CSS Pre-processors //css 压缩
 ◉ Linter / Formatter //格式校验
 ◯ Unit Testing
 ◯ E2E Testing

这里css压缩推荐dart-sass 性能更好

ESLint 推荐Standard config ，代码格式的校验虽然不够严格但是更友好

？Pick additional lint features:** (Press **** to select, **** to toggle all, **
**>** to invert selection)  //校验代码的时机？推荐在save的时候校验代码，不然在提交时候才校验可能会有大量报错
❯◉ Lint on save
 ◯ Lint and fix on commit
 
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) //这些构建文件
❯ In dedicated config files  //推荐在单独的configfile 中配置，以免backage.json 过长
  In package.json 
Save this as a preset for future projects? //是否存储本次创建项目的配置，如果选择y 下次再创建项目的时候则会看到你保存的初始化选项

如果在创建项目时选择了默认模式安装，参考官方文档插件和preset手动增加插件，最好还是一开始就配置好。

Preset

一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

vue ui 安装

执行vue ui 可以使用图形界面初始化项目
安装后的配置界面（仪表盘）
http://localhost:8000/dashboard

vue ui

执行vue ui 可以使用图形界面初始化项目

Babel+Router+CSS+Router+Linter

webpack相关

开发中的一些高级配置方法：官方文档。

简单的配置方法可以参考官网配置参考中的内容：

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

几个比较常用的配置：

1. baseurl路径的配置（3.0改叫publicpath了）配置开发/正式环境的网站目录https://cli.vuejs.org/zh/config/#publicpath。
2. devServer 启动一个代理服务器，防止本地调试的跨端端问题。
3. productionSourceMap 设置成false ，生产环境就不会生成sourcemap 加速生产环境的构建。

你可以将其输出重定向到一个文件以便进行查阅：

vue inspect > output.js

Vue 工程目录

• package.json:
  管理着项目中的所有的依赖和命令；
• babel.config.js:
  配置整个项目中的es6的语法，定制化添加babel的属性；
• eslintrc.js:
  配置许多eslint扩展的语法，和一些基本法则；