点个star在看

cmd里操作以下内容。打开方式：win+R，输入cmd，回车 或 文件夹下地址栏里输入cmd快捷打开

创建项目

vue create [projectName] 例如：vue create veet

vueCreateVeet.png

说明

  1. default 是 使用默认配置
  2. Manually select features 是 自定义配置

    选择

    Manually select features
    自定义配置

选择配置（自定义配置）

vueOption.png

说明

  1. Choose Vue Version 选择vue版本
  2. Babel 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
  3. TypeScript TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
  4. Progressive Web App (PWA) Support 渐进式Web应用程序
  5. Router vue-router（vue路由）
  6. Vuex vuex（vue的状态管理模式）
  7. CSS Pre-processors CSS 预处理器（如：less、sass）
  8. Linter / Formatter 代码风格检查和格式化（如：ESlint）
  9. Unit Testing 单元测试（unit tests）
  10. E2E Testing e2e（end to end） 测试

    选择

    1，2，3，5，6，7，8

配置Vue版本

vueVersion.png

说明

vue版本

选择

3.x

配置class样式

vueClassStyle.png

说明

是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，建议选择y

选择

直接敲回车啊！

配置TypeScript

vueTs.png

说明

使用Babel与TypeScript一起用于自动检测的填充？

选择

直接敲回车啊！

配置路由

vueRouter.png

说明

Yes 是 history模式
No 是 hash模式
Router利用了浏览器自身的hash模式和history模式的特性来实现前端路由（通过调用浏览器提供的接口）

选择

直接敲回车啊！

配置CSS预编译

vueSass.png

说明

  1. Sass/SCSS (with dart-sass) sass官方主推，推荐
  2. Sass/SCSS (with node-sass) 由于镜像源问题，不推荐
  3. Less 推荐
  4. Stylus 不推荐

主要为css解决浏览器兼容、简化CSS代码 等问题

选择

dart-sass
直接敲回车啊！

配置语法检测工具

vueEs.png

说明

  1. ESLint with error prevention only 只进行报错提醒
  2. ESLint + Airbnb config 不严谨模式
  3. ESLint + Standard config 正常模式
  4. ESLint + Prettier 严格模式
  5. TSLint (deprecated) TypeScript格式验证工具

TSLint只有在选择TypeScript时才会存在
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多

选择

ESLint + Prettier

选择何时检测

vueSave.png

说明

  1. Lint on save 保存时检测
  2. Lint and fix on commit 修复和提交时检测

    选择

    Lint on save
    直接敲回车啊！

选择如何存放配置

vueFile.png

说明

  1. In dedicated config files 存放在专用配置文件中
  2. In package.json 存放在package.json中

    选择

    In dedicated config files
    直接敲回车啊！

配置保存当前选择的配置项

vueAllwaysSave.png

说明

是否保存当前选择的配置项？
如果当前配置是经常用到的配置，建议选择y存储一下当前配置项
如果只是临时使用的话就不需要存储了

选择

N

完成

vueSuccess.png

其他未用到功能不在这里叙述

Idea导入

导入项目

略

安装依赖(个人习惯yarn)

yarn install

image.png

启动

npmStart.gif

大功告成

success.png
棒！

vue3项目结构介绍

结构

|-node_modules — 所有的项目依赖包都放在这个目录下
|-public — 公共文件夹
—-|favicon.ico — 网站的显示图标
—-|index.html — 入口的html文件
|-src — 源文件目录，编写的代码基本都在这个目录下
—-|assets — 放置静态文件的目录，比如logo.pn就放在这里
—-|components — Vue的组件文件，自定义的组件都会放到这
—-|router — vue-router路由文件。index.ts中引入views包下的*.vue
—-|store — 是vuex的文件，主要用于项目里边的一些状态保存。比如state、actions等
—-|views — 用于存放我们写好的各种页面，即路由组件，比如Login.vue，Home.vue
—-|App.vue — 根组件，这个在Vue2中也有
—-|main.ts — 入口文件，因为采用了TypeScript所以是ts结尾
—-|shims-vue.d.ts — 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc — 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js — Eslint的配置文件，不用作过多介绍
|-.gitignore — 用来配置那些文件不归git管理
|-babel.config.js —工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容
|-package.json — 命令配置和包管理文件
|-README.md — 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json — 关于TypoScript的配置文件