How to create vue.js3 app using typescript/vue-router/vuex/ but without vue-cli
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. but I can't use vue-cli in this project
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
can you suggest to me any blog, tutorial where someone builds a vue3 app from scratch with those tools but without vue-cli?
Full taks:
Write the Login Form on the VueJS 3.0 Framework and using TypeScript. You should also use Vuex (State Management) to store data and manipulate it, such as recording, reading, and retrieving it from the server. @ Vue / cli should not be used in the project. You have to run the webpack in the project yourself.
this is very important for me.
Thanks in advance
1 answers
solution1
1 2021-05-17 14:59:46
If you can't use Vue CLI, you'll have to install the dependencies manually.
To keep things simple, you can use Parcel as the bundler.
This way you don't have to deal with configuring webpack.
Start by making sure Typescript is installed globally.
Next, configure your package.json like this:
{
"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.
Execute yarn install or npm install to install all the dependencies.
Next make sure you have an App.vue , index.html and an index.ts inside a root src/ directory.
Lastly, create the following files at root:
vue.shim.d.ts
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
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
It lets you configure a build without Vue CLI and implement the features you require.
You can generate a project with Vue and typescript ticked, download it and then add in Vue router and Vuex as required.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.