vue的荆棘之路

1node.js和vue脚手架安装

1 下载node.js,傻瓜式安装

2 安装完成后,在本地Windows的cmd命令普通窗口就可以

①安装命令 npm i vue-cli -g

②安装包命令 npm i webpack -g

③完成之后用管理员身份进入cmd黑窗口,③之后都是在管理员命令黑窗口执行命令

进入你要安装的文件夹目录位置,

eg: cd /d F:\test

④在test下创建一个文件夹myvue1

  vue create myvue1

//版本不符,先卸载再安装,

⑤执行命令

npm uninstall - g vue-cli 

npm install -g @vue/cli

执行完成之后

⑥执行命令

npm run serve

复制上面的路进入这个页面为成功

完成结束

2写个组件练习一下

1.了解:

1.前端服务器node.js

默认端口号 8080 

1.1 main.js前端程序的入口

这段代码是一个基本的Vue.js应用程序的入口文件。让我一行一行解释给你听：

1. import Vue from 'vue': 这行代码引入了Vue.js库，使其在文件中可用。

2. import App from './App.vue': 这行代码引入了名为App的组件，该组件定义了应用程序的根组件。

3. import router from './router': 这行代码引入了名为router的路由器对象，它定义了应用程序的路由配置。

4. Vue.config.productionTip = false: 这行代码关闭了Vue.js在控制台中显示生产模式的提示信息。

5. new Vue({}): 这行代码创建了一个新的Vue实例，用于管理整个应用程序。

6. router: 这行代码将之前引入的路由器对象传递给Vue实例，以启用路由功能。

7. render: h => h(App): 这行代码定义了渲染函数，它告诉Vue实例将App组件渲染到页面上。

8. .$mount('#app'): 这行代码将Vue实例挂载到HTML页面上的id为app的元素上，使Vue应用程序开始运行。

2.路由:

定义路由的时候  path的路径一定是唯一的,

如果写name   对应的值 也得是唯一

容器 作用  存放组件   一般寻访到父组件里面

App.vue是所有组件的父类

在vue 里面 @ 代表的是src