一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。
vue项目
main.js中的createApp方法是用来创建应用程序实例，然后通过mount方法将id为root的DOM元素上装载应用程序实例的根组件。导入语句中为了简化路径的访问，我们使用@符号表示src目录。package.json中是一个json的npm配置文件，里面有很多配置信息，比如name表示项目名称，version表示项目版本，private表示是否私有项目，script里面包括运行项目，构建项目和格式化代码。dependencies表示配置项目依赖的模块列表。devDependencies里面存放的是用于开发环境，但是不发布到生产环境的。我们在使用npm安装依赖模块时，如果在生产环境下使用的话用--save也可以简称-S，如果在开发环境使用用-D。我们打包的时候node_modules里面的文件不会被发布，别人需要的时候执行npm install就可以下载相关的包依赖文件。
npm install xxx -S
npm install xxx --save
路由
vue中我们使用模块化开发都需要使用npm去安装相关的包。vue3中的路由是安装vue-router@next，我们在html中使用路由用router-link，to表示的是指定链接的url。在浏览器中查看代码，可以发现默认生成的是一个a标签。除了默认渲染的标签外，我们还可以渲染为别的标签，将标签包裹在router-link中。如果需要指定组件渲染的位置，使用router-view标签。当我们使用此标签后，点击链接时会在使用这个标签的位置上渲染模板内容。如果想要定义路由，使用template。路由定义之后还可以结合组件一起使用。创建路由实例我们可以把路由参数配置传进去。然后调用应用程序的use()方法，并将这个路由对象传入进去，这样整个应用程序都可以具有路由功能。hash模式创建的方法是使用VueRouter.createWebHashHistory，在浏览器中最直观的感觉就是在url上有#开始。
// 安装路由
npm install vue-router@next --save
// html
<router-link to="/test">前端</router-link>
// 定义
const Tea = { template: '<div>web前端</div>' }
// 使用
const routes = [{
{ path: '/web', component: Tea }
}]
// 创建
const router = VueRouter.createRouter({
history:VueRouter.createWebHashHistory(),
routes
})
// 调用
const root = Vue.createApp({})
root.use(router)
root.mount('#root');
如果我们想要匹配某种模式的路由映射到同一个组件，可以使用动态参数。参数使用:表示。当匹配到一个路由时，参数的值会被保存到this.$route.params，其中this.$route表示当前路由对象。可以在组件中使用。
