搭建Vue项目

目录

一. 搭建vue项目步骤

二. vue项目加载过程

三. 根组件App.vue常见内容

---

一. 搭建vue项目步骤

1. 安装node.js，npm，vue CLI

2. 进入选中的文件夹中，在terminal中输入指令vue create 【my-vue-app】，my-vue-app是自己定的项目名称。

注：vue create命令，实际是由vue CLI（vue.js的命令行工具）背后调用npm命令来安装vue.js及其他依赖包

3. 成功创建了一个vue项目

注：有时可能会遇到依赖包安装失败的问题

npm config get registry
获取当前仓库地址

npm config set registry http://registry.npm.taobao.org/
仓库地址设为淘宝npm地址

npm cache clean --force
清除缓存

二. vue项目加载过程

1. vue项目的入口仍然是index.html文件，有可能被放置在public目录下，浏览器渲染index.html来展示页面。
2. 当index.html加载后，会继续加载main.js文件。main.js中创建了vue实例，并将实例内容挂载到index.html中指定的位置。

挂载：在Web前端开发中，挂载指将Vue实例的内容渲染到html文档的某个部分，这是通过在Vue实例中指定一个挂载点（DOM元素）来实现的。

import Vue from 'vue'
import App from './App'
import router from './router'


new Vue({
  el: '#app', //将该vue实例挂载到html文件中，该id选择器对应的DOM元素上
  router,
  components: { App } //实例使用App组件
})

vue3创建实例的方式：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

//vue3：创建vue实例并挂载的方法
const app = createApp(App)
app.use(router)
app.mount('#app')

参考：浅谈vue中index.html、main.js、App.vue、index.js之前的关系以及加载过程 

           Vue项目的main.js文件如何被index.html文件加载

三. 根组件App.vue常见内容

1. 所有页面的切换都是在App.vue中进行的，模板中添加<router-view>渲染当前路由匹配的组件，因此页面模板实则是App.vue的子组件。

2. 如何实现根据路由动态渲染数组

1. 首先创建vue-router实例，并将路由配置数组传参给它
2. 创建vue实例时，将vue-router实例作为选项传递给vue，这样整个应用就可以访问路由器。

3.vue-router实现根据路由导航

• router.push与用户点击<router-link>标签的效果是相同的，<router-link>在内部使用router.push来实现导航 
• router.push是一个编程式导航的方法，一般在事件处理函数、异步回调函数中使用它来控制导航。<router-link>是一个声明式导航的组件，类似<a>标签。

注：在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，会遇到一些问题

Vue Router不再是一个类，而是一组函数。不用再写new Router()，而是调用createRouter和createWebHistory两个函数来创建路由实例。

参考：Vue路由入门,用Vue路由来实现不同页面的渲染