如何使用 typescript/vue-router/vuex/ 但不使用 vue-cli 创建 vue.js3 应用程序

Question

My task is to create a vue3 application with typescript support, also I have to use vuex for state management and vue-router for basic routing.我的任务是创建一个支持 typescript 的vue3应用程序，我还必须使用vuex进行 state 管理，使用vue-router进行基本路由。 but I can't use vue-cli in this project但我不能在这个项目中使用 vue-cli

my current code:我当前的代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
</head>

as I have never used typescript in vue project因为我从未在 vue 项目中使用过 typescript
can you suggest to me any blog, tutorial where someone builds a vue3 app from scratch with those tools but without vue-cli?你能向我推荐任何博客、教程，其中有人使用这些工具从头开始构建 vue3 应用程序但没有 vue-cli 吗？

Full taks:满分：

Write the Login Form on the VueJS 3.0 Framework and using TypeScript.在 VueJS 3.0 框架上编写登录表单并使用 TypeScript。 You should also use Vuex (State Management) to store data and manipulate it, such as recording, reading, and retrieving it from the server.您还应该使用 Vuex（状态管理）来存储和操作数据，例如记录、读取和从服务器检索数据。 @ Vue / cli should not be used in the project. @Vue/cli 不应该在项目中使用。 You have to run the webpack in the project yourself.您必须自己在项目中运行 webpack。

this is very important for me.这对我来说非常重要。

Thanks in advance提前致谢

Answer 1

If you can't use Vue CLI, you'll have to install the dependencies manually.如果您不能使用 Vue CLI，则必须手动安装依赖项。

To keep things simple, you can use Parcel as the bundler.为简单起见，您可以使用 Parcel 作为捆绑程序。

This way you don't have to deal with configuring webpack.这样您就不必处理配置 webpack。

Start by making sure Typescript is installed globally.首先确保全局安装 Typescript。

Next, configure your package.json like this:接下来，像这样配置您的package.json ：

{
  "name": "project name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "start": "parcel src/index.html",
    "build-prod": "parcel build src/index.html"
  },
  "dependencies": {
    "vue@next": "^2.6.12",
    "vuex": "2.0.0",
    "vue-router": "2.0.0"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

This includes the dependencies for Vue3, Vuex, Vue Router and for Parcel along with some setup scripts for parcel.这包括 Vue3、Vuex、Vue Router 和 Parcel 的依赖项以及一些用于 parcel 的设置脚本。

Execute yarn install or npm install to install all the dependencies.执行yarn install或npm install安装所有依赖。

Next make sure you have an App.vue , index.html and an index.ts inside a root src/ directory.接下来确保在根src/目录中有App.vue 、 index.html和index.ts 。

Lastly, create the following files at root:最后，在根目录下创建以下文件：

vue.shim.d.ts vue.shim.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

tsconfig.json tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "es6",
        "moduleResolution": "node",
        "target": "es5",
        "allowJs": true,
    },
    "include": [
        "./src/**/*"
    ]
}

Take a look at this awesome website: https://createapp.dev/parcel看看这个很棒的网站： https://createapp.dev/parcel

It lets you configure a build without Vue CLI and implement the features you require.它允许您在没有 Vue CLI 的情况下配置构建并实现您需要的功能。

You can generate a project with Vue and typescript ticked, download it and then add in Vue router and Vuex as required.您可以生成一个带有 Vue 和 typescript 的项目，下载它然后根据需要添加 Vue 路由器和 Vuex。

如何使用 typescript/vue-router/vuex/ 但不使用 vue-cli 创建 vue.js3 应用程序

问题描述

1 个解决方案

解决方案1
1 2021-05-17 14:59:46

如何使用 typescript/vue-router/vuex/ 但不使用 vue-cli 创建 vue.js3 应用程序

问题描述

1 个解决方案

解决方案1 1 2021-05-17 14:59:46

解决方案1
1 2021-05-17 14:59:46