创建项目
vue-cli创建
1 2 3 4 | $npm install -g @vue/cli $vue --version @vue/cli 4.5.15 $vue create my-project |
然后的步骤:
Please pick a preset
选择 Manually select featuresCheck the features needed for your project
选择上TypeScript，特别注意点空格是选择，点回车是下一步Choose a version of Vue.js that you want to start the project with
选择 3.x (Preview)Use class-style component syntax
直接回车Use Babel alongside TypeScript
直接回车Pick a linter / formatter config
直接回车Use history mode for router?
直接回车Pick a linter / formatter config
直接回车Pick additional lint features
直接回车Where do you prefer placing config for Babel, ESLint, etc.?
直接回车Save this as a preset for future projects?
直接回车
文件结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 | my-project +--- babel.config.js +--- package-lock.json +--- package.json +--- public | +--- favicon.ico | +--- index.html +--- README.md +--- src | +--- App.vue | +--- assets | | +--- logo.png | +--- components | | +--- HelloWorld.vue | +--- main.ts | +--- shims-vue.d.ts +--- tsconfig.json +--- node_modules | +--- ... |
入口文件为src/main.ts
vite创建
执行以下命令创建项目
1 2 3 4 | $npm init vite-app <project-name> $cd <project-name> $npm install $npm run dev |
文件结构：
1 2 3 4 5 6 7 8 9 10 11 12 13 | project-name +--- index.html +--- package-lock.json +--- package.json +--- public | +--- favicon.ico +--- src | +--- App.vue | +--- assets | | +--- logo.png | +--- components | | +--- HelloWorld.vue | +--- index.css | +--- main.js +--- node_modules | +--- ... |
入口文件为src/main.ts
注意: 由于使用vite方法创建的项目没有vue的声明文件, 所以需要我们自定义, 否则会报错.
src/shims-vue.d.ts
1 2 3 4 5 6 | /* eslint-disable */ declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } |
安装vue-router
1 | $npm install vue-router@4 |
至此, package.json如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | { "name": "my-project", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-router": "^4.0.12" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-typescript": "^7.0.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "typescript": "~4.1.5" } } |
创建/修改组件
创建src/router/index.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 | import { createRouter, createWebHashHistory } from "vue-router" import Home from '../components/Home.vue' import About from '../components/About.vue' import User from '../components/User.vue' const routes = [ // router参数详细看下文 { path: "/home", name: "home", component: Home }, { path: "/about", name: "about", component: About }, { path: "/user/:uid", // 动态参数 name: "user", 郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。 相关文章阅读 |