安装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中修改