Node的下载安装及路由

一、进入官网地址下载安装包

https://nodejs.org/zh-cn/download/

选择对应你系统的Node.js版本

二、安装Node除了要注意中间要选择安装位置其他直接点[Next]就可以,最后点[Install]和【Finish

三,环境配置

1、查看自己安装是否成功

打开命令窗口

输入:node -v     // 显示node.js版本

            npm -v      // 显示npm版本

Node的下载安装及路由_第1张图片

2、安装vue-cli

在命令窗口输入 npm i -g vue-cli

Node的下载安装及路由_第2张图片

3、安装webpack

在命令窗口输入  npm i webpack -g

Node的下载安装及路由_第3张图片

4、安装打包的客户端 

在命令窗口执行 npm i webpack-cli -g

Node的下载安装及路由_第4张图片

四、创建项目

创建项目要先在自己的文件夹里创建一文件

例如我的在cod中创建了一个vuework的文件

用管理员的身份打开命令窗口,然后cd切换一路径的你刚刚创建的包下

在命令窗口执行 vue create myvue

如果出现下面这些

Node的下载安装及路由_第5张图片

就说明就是vue-cli 的版本和我们创建项目的版本不一致修改一下版本

执行图中的,这两行意思是卸载原来的不符合使用的vue的版本并安装合适的版本

npm uninstall -g vue-cli

npm install - g @vue/cli

然后创建项目执行 vue create myvue

选y下一步

Node的下载安装及路由_第6张图片

选中Manually select features回车建

Node的下载安装及路由_第7张图片

选择lintrer/Formatter如果有符号或者其他小错误就会报错,这里我把他取消选中了(空格是选中或者取消选中)

router要选中,其他不用管直接回车下一步

Node的下载安装及路由_第8张图片

选择2.x回车下一步

Node的下载安装及路由_第9张图片

选y下一步

 Node的下载安装及路由_第10张图片

选择最后一个回车下一步

Node的下载安装及路由_第11张图片

选y下一步

Node的下载安装及路由_第12张图片

test是模板名字自己记好

Node的下载安装及路由_第13张图片

可以执行一下     cd myvue切换路径

                           执行npm run serve(也是后面重新启动vue项目用的)

然后浏览器打开http://localhost:8080/会出现下面这个图说明就成功了

Node的下载安装及路由_第14张图片

五、路由

打开我们创建好的vue项目

router中的index.js

Node的下载安装及路由_第15张图片

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

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

Node的下载安装及路由_第16张图片

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

App.vue是所有组件的父类

在vue 里面 @ 代表的是src

六、写一个组件配置路径