VUE-cli01脚手架下载

项目环境配置
1.安装 node.js
下载地址:https://nodejs.org/en/download/
2.安装淘宝镜像cnpm:npm install -g cnpm
3.安装 vue-cli:npm install vue-cli -g(可以自动的构建项目结构和项目目录)
4.安装webpack:npm install webpack -g
以上安装一次以后均不用安装
5.在合适的位置创建一个文件夹(不要出现中文路径)
6.cd 到指定的路径中 并且初始化文件夹:npm init -y
7.创建项目:vue init webpack 项目名 !!!这一步很重要
连续按enter直到确认是否搭建路由:
Install vue-router? (Y/n) 按y
接下来的全部按n
然后回车继续安装
8.下好后会有两行黄字提醒:
1)cd到所创建的项目目录下
2)启动项目:npm run dev
出现:your application is running here:http://localhost:8080
就OK了
在浏览器中输入localhost:8080回车就可以看到相关的图标了
如果提示缺少node_modules文件则:npm i 回车即可
至此,空项目搭建完毕
9.删除不必要的东西:
1)用vscode代码编译器打开创建的文件夹,会自动提示下载vetur扩展,点确定下载
若没有提示则自己搜索下载
2)删除components文件夹下helloword.vue中的里的内容,并且修改成自己的
3)把app.vue 中的默认的图片删掉,并把style中的所有样式删掉
10.scoped:当前样式仅对当前组件生效
可以将一些全局使用的样式写在app的style中
创建组件写在components文件夹中 .vue
遇到npm下载出错了可以使用cnpm下载

文件介绍:
build和config是配置目录,在不改变端口号时候和我们写项目没关系
node_modules:插件安装位置
src文件夹
static:静态资源文件:
components:组件
router:路由
app.vue:全局组件,需要删除修里面的一些东西
main:全局配置文件
index.html:展示最终页面的
以.vue结尾的文件:单文件组件,以一个文件封装一个组件

  1. 删除 helloword.vue文件里面的   template里面的内容 并且修改成自己的
    
  2. 必须要做的   把app.vue中 的那个默认的图片删掉 但是注意千万别把router-view删掉 并且把里面的style样式全部删除掉
    

四、本地图片可以放在assets文件夹这种,最好在里面建一个img文件夹

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值