01-Vue3基础入门

安装node环境

主要是安装npm，此处省略。

Vue-Cli安装

如果安装过vue2.0先执行：

npm uninstall vue-cli -g

如果没有安装过vue2.0，执行：

npm install -g @vue/cli
npm install -g @vue/cli@next

验证：

vue -V

项目创建

# /opt目录下进行演示
vue create projectName
# 1.命令行提示输入"y"，然后进行回车
# 2.此时提示用户以什么模板方式进行安装
# Default([Vue2] babel, eslint) 默认的预设设置，创建vue2.0项目，包含babel和eslint的支持
# Default(Vue3 Preview) 默认预设，快速创建vue3.0的项目，包含babel和eslint的支持
# Manually select features：手动进行项目设置，自行进行选择，使用上下箭头和空格键进行反选或者选中
# 下面对里面的配置项进行重点记录：
#  Babel：源码进行编码 ES6=》ES5
#  ProgressiveWebAppSupport 使用渐进式网页应用（PWA）
#  CSS Pre-processors:使用css预处理器，如Less、Sass等
#  Linter/Formatter：使用代码风格检查和格式化
#  UnitTesting：使用单元测试
#  E2E Testing：黑盒测试的一种
# 3.选择项目类型，提供有vue2.x和vue3.x(*)
# 4.是否使用history路由模式，如果启用，那么可能访问的时候出现浏览器的空白页面(n)
# 5.选择CSS预处理器：Less(扩充了CSS)、Sacc/SCSS（*）（采用Ruby编写的，最成熟的Css处理器）、Stylus（类似python，没有规范维护较为困难）
# 6.选择代码格式化监测工具：
#   a.EsLint with errors prevention only（*） 只提示错误提醒
#   b.ESLint+Airbnb config:ESLint Airbnb标准
#   c.ESLint+Standard config:ESLint Standard标准(*)
#   d.ESLint+Prettier:ESLint(代码质量检测)+Prettier(代码格式化工具)
# 7.选择代码检查方式：
#   a.Lint on save（*）：保存时检查
#   b.Linet and fix on commit(requires Git):提交时检查
# 8.设置Babel、PostCSS、ESLint等配置文件如何存放：
#   a.In dedicated config files: 放在单独的配置文件中
#   b.In package.json：放到package.json中(*)
# 9.设置是否保存当前配置：y/n（n）
# 10.等待配置完成并生效
# 启动项目：
npm run serve
# 访问测试：http://ip:port/

项目目录说明

• node_modules:项目依赖包
• public：公共资源目录，存放需要访问的图片文件和HTML文件，打包的时候将该文件夹下的文件直接复制到dist中
  -index.html：主页文件
  • favicon.ico: 图标文件
• src：核心文件目录
  • asserts：静态资源目录
  • components：组件文件夹
  • router：路由配置目录
  • store：容器目录，包含应用中大部分的状态
  • views：视图组件目录
• App.vue 主组件，也是页面入口文件，负责构建定义和页面组件归集
• main.js：入口JavaScript文件
• .browserslistrc：配置使用css兼容性插件的使用范围
• .eslintrc.js：配置使用ESLint
• .gitignore：配置gitignore的文件或者文件夹
• babel.config.js：使用一些预设
• package.json：项目描述以及依赖
• package-lock.json：版本管理使用的文件
• README.md：项目描述

开发工具

• JetBrains WebStorm

  • 收费

• Visual Studio Code

  • 开源免费，推荐使用
  • 简称 VS Code
  • 下载地址
  • 安装插件：
    • 汉化插件Chinese(Simplified) Language
    • 前端常用插件：
      • Auto Close Tag：自动补全HTML表亲啊
      • Auto Rename Tag:自动重命名成对的HTML标记
      • HTML CSS Support：语法提示
      • HTML Snippets：HTML代码片段，注意不需要键入尖括号
      • JavaScript(ES6) code snippets：ES6语法只能提示
      • language-stylus:语法提示
      • Path Autocomplete：自动提示文件路径，支持各种快速引入文件
      • VS Color Picker:颜色自动提示
      • Vue VS Code Snippets:HTML中的提示和代码补全
      • Vetur：VSCode官方指定的vue插件，包含语法高亮、智能提示、错误提示、emmet、格式化、自动补全和debugger等实用功能
      • ESLint：规范JavaScript代码书写规则
      • Vetur:语法高亮、智能感知等
      • Debugger for Chrome：通过VSCode调试在GoogleChrome中运行的JavaScript代码
      • Beautify：在代码文件中右击，在弹出的快捷键中选择一键格式化代码
      • Bracket Pair Colorizer：该插件可以把成对的括号做颜色区分
      • Code Spell Checker：拼写检查程序

  以上是此次内容的总结，后续更新。