新建vue3项目

发布时间:2023年12月17日

三种方法

一. 第一种方式

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 Testing
    
    Babel:转码器,可将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.x
      2.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 only
      ESLint + Airbnb config
      ESLint + Standard config
      ESLint + 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 front


Vue 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 项目的入口文件。

文章来源:https://blog.csdn.net/qq_40981804/article/details/135047939
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。