Node的下载安装及路由

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

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

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

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

三，环境配置

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

打开命令窗口

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

            npm -v      // 显示npm版本

2、安装vue-cli

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

3、安装webpack

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

4、安装打包的客户端 

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

四、创建项目

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

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

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

在命令窗口执行 vue create myvue

如果出现下面这些

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

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

npm uninstall -g vue-cli

npm install - g @vue/cli

然后创建项目执行 vue create myvue

选y下一步

选中Manually select features回车建

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

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

选择2.x回车下一步

选y下一步

 

选择最后一个回车下一步

选y下一步

test是模板名字自己记好

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

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

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

五、路由

打开我们创建好的vue项目

router中的index.js

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

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

<router-view/>

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

App.vue是所有组件的父类

在vue 里面 @ 代表的是src

六、写一个组件配置路径

<template>

标签里面只能有一个根标签

如果出现上图的错误就代表在template中写了多个跟标签

七、写组件

<template>

<div>

我是码农

</div>

</template>

<script></script>

<style></style>

八、在router/index.js中配置路径

九、访问