vue学习(基础知识)


本文参考地址:https://www.runoob.com/vue2/vue-directory-structure.html

文章多少会有点错误,欢迎指出。

**使用vue之前需要先安装nodejs。**参考:https://blog.csdn.net/MYNAMEL/article/details/113988150

安装环境和下载项目

在cmd中使用以下命令

npm install -g vue-cli   (安装脚手架)
vue init webpack demo   (下载成品的新项目模板,demo就是你的项目名)

切换到下载好的文件下,cmd中使用下面命令启动vue

npm run dev   (在demo文件夹下使用该cmd命令)

刚下载的项目注意:

注1:关闭代码规则校验
在这里插入图片描述
注2:在.eslintrc.js文件中添加一句 “no-unused-vars”: ‘off’ 注意添加的位置
在这里插入图片描述

在这里插入图片描述

下面是添加组件的两种方式:

解释:vue相当于只有一个主页面,其他页面都是在这个主页面里面显示的,一般来说App.vue就是这个主页面但是不在里面开发,App.vue只添加其他的小页面。添加小页面连接的方式下面显示了两种。

在这里插入图片描述

方法一:直接在app.vue页面中引入其他页面
在这里插入图片描述
在这里插入图片描述

方法二:先写一个配置文件,将其他页面的连接信息写入这个配置文件,然后在app.vue中引入这个配置文件
在这里插入图片描述
在这里插入图片描述

申明方法和变量,并进行应用。

在这里插入图片描述

命令:

npm install vue-router(安装路由)
npm install axios(安装Ajax)
npm install -g vue-cli   (安装脚手架)
vue init webpack demo   (下载成品的新项目模板,demo就是你的项目名)
npm run dev(运行vue)

config/index.js

 port: 8080//端口号
 autoOpenBrowser: false//启动项目后是否自动打开浏览器访问
 useEslint: false//是否进行语法校验

package.json(项目信息)

scripts是一些命令,如启动时npm run dev或npm start
dependencies是当前项目已经有的东西和他们的版本,如vue-router,axios等

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值