node创建vue项目并写一个组件

安装node

        通过官网下载node：Node.js (nodejs.org)

下载之后安装，全程next即可，安装完成可以在命令提示符界面查看版本来验证是否安装成功

node -v

        出现版本号及表示安装成功。

nmp

        第一次使用的时候需要先安装vue-cli

Npm i -g vue-cli

 

         安装模块打包器Webpack

Npm i webpack -g

 

Npm i webpack-cli -g

        显示如上效果即为成功，接下来就可以开始创建vue项目

创建项目

       创建项目的命令如下：

Vue create 项目的名字

        如果出现下面这种情况表示vue-cli的版本跟我们创建项目的版本不一致，在命令行依次运行蓝色的两个命令即可

 

        成功后会弹出这个弹窗选择模板 

        检测项目中所需要的功能，选择完全后回车即可

        选择vue版本，这里选择vue2

        是否使用路由器的历史记录模式，选择是

        使用路由器的历史模式你更喜欢在哪里放置Babel、ESLint等的配置，选择第二个

        是否将其另存为未来项目的预设，是和否都可以，是的话之后可以直接只用这个预设

        显示以下结果即为成功

启动服务

        切换到所在目录

cd vue1

        运行

npm run serve

         出现该界面为成功，在浏览器中输入对应的网址即可

关闭命令提示符窗口便是关闭服务

了解项目中的内容

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

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

package.json

        可以在其中添加依赖，命令如下（演示添加axios）：

npm i axios

这里就会多出来axios 

 

<router-view/>

容器，作用：

 存放组件，一般寻访到父组件里面，App.vue是所有组件的父类

写一个组件

        先写一个组件，可以写在views目录下

<template>
	<div>
		我身无拘，武道无穷
	</div>
</template>

<script>
</script>

<style>
</style>

        在router/index.js中配置路径 

        然后运行项目，跳转到指定页面即可

 

         修改启动路径，在package.json中修改