新建vue3项目
三种方法
一. 第一种方式
1、操作步骤：
-
创建项目目录
vue create 项目名称 -
选择配置方式
? Please pick a preset: #选择一个配置 Default （[Vue 3] babel, eslint）Default （[Vue 2] babel, eslint）Manually select features # 手动选择功能 -
选择配置内容，一般为babel,router,Linter / Formatter,vuex等，上下键控制，空格键选择
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) >(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support( ) Router( ) Vuex( ) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E TestingBabel：转码器，可将ES6代码转为ES5 TypeScript： 支持使用 TypeScript （JavaScript超集） Progressive Web App (PWA) Support ：支持PWA（渐进式Web应用程序） Router ：支持 vue-router （路由） Vuex ：支持 vuex （状态管理器） CSS Pre-processors： 支持 CSS 预处理器 Linter / Formatter ：支持代码风格检查和格式化 Unit Testing：支持单元测试 E2E Testing： 支持 E2E 测试（end to end） -
选择vue版本：
? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 3.x2.x -
使用用history模式来创建路由（根据自身需要选择）：一般不建议使用历史模式
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) -
选择CSS预处理器（根据自身需要选择）：
-
选择ESlint（我选默认）推荐使用第一项或第三项
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention onlyESLint + Airbnb configESLint + Standard configESLint + Prettier -
什么时候检测：
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and<enter> to proceed)
>(*) Lint on save #我选保存的时候( ) Lint and fix on commit
-
选择配置文件位置（单独保存在各自的配置文件中or放在package.json中）
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files #一般选择第一项，为的是将文件分离打包In package.json -
保存本次配置内容：建议选择n
? Save this as a preset for future projects? (y/N) -
选择包管理工具，这里选择 npm，也可以选择 Yarn 来管理你的项目。
? Pick the package manager to use when installing dependencies: (Use arrow keys) ❯ Use Yarn Use NPM
运行项目
# 方式一
npm run serve
# 方式二
yarn serve
配置记录
D:\project\java\web\flyme>vue create frontVue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)(*) Babel
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space
> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)(*) Babel
? Check the features needed for your project: Babel,
Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the
project with 3.x
? Use history mode for router? (Requires proper server
setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, ? Pick additional lint features: (Press <space>? Pick additional lint features: (Press <space> to select, ? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint,
etc.? In dedicated config files
? Save this as a preset for future projects? n
? Pick the package manager to use when installing dependencies: (Use arrow keys) Use Yarn 二. 第二种方式(推荐) 详情
-
基于可视化面板创建项目，终端面板输入vue ui,待网页窗口打开选择vue项目管理
-
此后的步骤与第一种方法相类似，基于页面图形按钮的方式经行创建
第三种方式
在安装之前需要确保终端运行过npm i -g @vue/cli-init命令，然后运行 vue init webpack项目名
(1) 确定项目名，回车
(2) 项目描述，回车
(3) 确定作者信息，回车
(4) 一般情况依次如下配置，回车
(5) 创建完成，进入并运行项目
目录结构
├── .vscode 目录。
│ ├── v
│ ├── v
│ └── v
│
├── node_modules 目录 （vue 项目的文件依赖存放在这个文件夹。）
│ ├── 所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
│ ├── v
│ └── v
│
│
├── public 目录：存放项目公共资源。如网站LOGO等。
│ │ 通常我们不需要对public文件夹内的资源做任何修改。
│ │ 后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；
│ ├── v
│ ├── v
│ └── v
│
│
├── src 目录 ：存放 vue 项目的源代码。其下的各个文件（文件夹）分别为：
│ ├── assets 目录 ：资源文件，存放 css，图片等资源。
│ ├── component 目录 ：组件文件夹，存放 vue 的公共组件（核心）
│ │ （注册于全局，在整个项目中通过关键词便可直接输出）。
│ │
│ ├── router 目录 ：用来存放 index.js，用来配置路由，定义各个页面对应的URL。
│ ├── store 目录 ：组件文件夹，存放 vue 的公共组件
│ ├── views 目录：放主体页面，vue 文件是可以用来充当路由 view 的。
│ ├── tool：用来存放工具类 js，
│ │ 将 js 代码封装好放入这个文件夹可以全局调用
│ │ （如api.js，http.js 是对 http 方法和 api 方法的封装）。
│ ├── main.js：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。
│ ├── app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
│ ├──
│ └── v
│
│
├── babel.config.js
├── jsconfig.json
├── package.json 存放项目的依赖配置
├── README.md
├── vue.config.js 全局配置
└──yarn.lock
node_modules文件夹，文件夹中往往会有几百个文件夹，Node项目所用到的第三方包特别多，也特别大。这些文件是由$ npm install命令产生的。所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
src文件夹是核心源代码的所在目录，展开后如下所示（不同版本的vue-cli生成的目录会稍有不同，不过核心都是一样的），正常开发的时候一般只修改 src 文件夹下的文件。
dist —— 项目构建打包后的默认输出目录。
index.html 与项目根目录，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。