1. Create a new folder
Enter the terminal from the newly created folder cmd
2. Install vite-create vue3 project based on vite
2.1. Run
npm init vite@latest
2.2.1. Enter the project name
2.2.2. Select vue
2.2.3. Select TypeScript language
3. Install dependencies
3.1. Enter the folder you just created
cd vite-project
3.2. View the image
#View current source npm config get registry #Replace with domestic mirror npm config set registry=http://registry.npm.taobao.org/
3.3. Start the project
npm run dev
Note: An error was reported when starting the project: No package.json (or package.yaml, or package.json5) was found in “E:\Miss D\mars3dMy”.
Reason: The root directory of the startup project was not found. Check whether there is an error when opening the terminal.
4. Configuration basics
4.1, pnpm will download things faster
npm in pnpm
4.2. Configure typeScript dependencies
npm install @types/node --save-dev
4.3. Modify vite.config.ts configuration file code
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
//Solve "vite use `--host` to expose"
base: './', //White screen without packaging
server: {
host: '0.0.0.0',
// port: 8080,
open: true
},
resolve:{
//Alias configuration, referencing things under the src path can be done through @such as: import Layout from '@/layout/index.vue'
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
Note: The following red wavy lines appear
Solution: Modify the configuration in tsconfig.node.json
4.4. Install routing
npm install vue-router@4
4.4.1. Create a new router folder in the src directory and create an index.ts file in the router
4.4.2, configure routing in index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
//Route initial point
path: '/',
name: 'HelloWorld',
component:()=>import('../components/HelloWorld.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
4.4.3, mount routing in main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App);
app.use(router).mount('#app')
Note: Red waves will appear
Reasons: 1. The volar plug-in does not enable takeover mode.
Go to the volar plug-in introduction and enable takeover mode.
2. Volar did not select the latest version of tyscriptSolution: 1. Enter typescript in the plug-in search box (do not delete the @builtin prefix)
2. Click the small gear in the lower right corner of the first one and select Disable
3. Click the button that needs to be reloaded to solve the problem.
Reference source link: vue3 error resolution: The module or its corresponding type declaration cannot be found. (Vue 3 can not find module)-CSDN Blog
4.4.4. Modify App.vue
<script setup lang="ts"> </script> <template> <router-view></router-view> </template> <style> </style>
4.4.5. After saving, run to see if an error is reported. Just open the content of the HelloWorld.vue page pointed to by the route as shown in the figure
Note: Open App.vue and the red wavy line will report an error
Solution: Because vue3 does not support the vetur plug-in, disable it and use the Vue Language Features plug-in.
Source link: vue3 + ts + vite import error: Moudle… has no default export_poguanba’s blog-CSDN blog
5. The configuration ts file is imported using @ method
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"skipLibCheck": true,
//Add to---
"suppressImplicitAnyIndexErrors": true, //Allow strings to be used as subscripts
"ignoreDeprecations":"5.0", //The previous sentence in the higher version reported an error, this sentence solves it. If you report an error like this, you can comment it out
"baseUrl": ".",
"paths": {
"@/*":[
"src/*"
]
}
//---------
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue" ],
"references": [{ "path": "./tsconfig.node.json" }],
//Add to
"exclude":["node_modules"] // // ts excluded files
}
6. Configure css preprocessor sass
npm install -D sass sass-loader
<style scoped lang="scss">
.read-the-docs {
color: #888;
}
</style>
7. Introduce element-plus
npm install element-plus --save npm install @element-plus/icons-vue // icon
7.1, main.ts introduction
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";//Internationalization
const app = createApp(App);
app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')
//Globally register icon component
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
Problems may arise
8. Install pinia (state management, similar to vuex in vue2)
npm install pinia
8.1, main.ts introduction
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //Internationalization
import { createPinia } from 'pinia'
const app = createApp(App);
// Instantiate Pinia
const pinia = createPinia()
app.use(ElementPlus,{locale: zhCn}).use(router).use(pinia).mount('#app')
//Globally register icon component
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
Source link: Detailed vue creation of vue3 project (vue3 + vue-router + ts + vite + element-plus + pinia)-CSDN blog
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeVue-routerWhat is vue-router? 39740 people are studying the system