vue3プロジェクトの作成方法

足場

vite 足場を使用して作成する

vite をグローバルにインストールする

//全局安装vite脚手架命令
$npm init vite -g 
//查看是否安装成功
$vite -v
//安装成功会显示版本号
vite/4.0.3 darwin-x64 node-v16.13.1

プロジェクトの作成

$npm i vite コマンドを実行すると、次のインターフェイスが表示されます。

プロジェクト名: プロジェクト名を入力します

使用するフレームワークを選択します: ここで vue を選択します

次に言語モードを選択します: ここでは TS が使用されます

Basics-3 という名前のプロジェクトが作成されました。次に、プロジェクト内に移動して、必要な依存関係をインストールします。

依存関係をインストールする

$npm i

依存関係のインストールが完了したら、npm run dev を使用して実行します。成功すると、次のようになります。

クリックして接続すると、次のようにサーバーページが表示されます。

ファイルディレクトリは次のとおりです。

詳細な紹介:

|- vue3-admin-app  # 项目名称
    |- node_modules  # 项目依赖包
  |- public
      favicon.ico      # 网页图标
  |- src                     # 写代码的主场
      |- assets             # 资源文件
          base.css     # 基础样式
          logo.svg     # logo
          main.css     # 项目样式
        |- components  # 自定义组件
        |- icons     # 图标组件
          HelloWorld.vue # 自定义组件
          TheWelcome.vue # 自定义组件
          welcomeItem.vue # 自定义组件
      |-router       # 路由文件夹
          index.ts     # 路由配置
      |- stores      # 状态管理器文件夹
          counter.ts   # 状态管理器模块
      |- views       # 项目页面组件
          AboutView.vue # 页面
          HomeView.vue  # 页面
      App.vue         # 项目跟组件
      main.ts         # 项目入口文件
  .eslintrc.cjs     # 代码格式化说明
  .gitignore        # git上传忽略文件
  .prettierrc.json  # 格式化配置
  env.d.ts                     # 环境配置声明文件 - ts 中
  index.html        # 页面模版
  package.json      # 项目依赖说明以及运行命令
  README.md                 # 说明文档
  tsconfig.config.json # ts的配置文件说明 - 本项目部分
  tsconfig.json                 # ts的配置文件说明 - 公共部分
  vite.config.ts             # vite的配置文件

vue3プロジェクトの作成方法

おすすめ