vue第三天笔记06——vue-cli练习

将下列HTML代码写入vue-cli项目





    
    
    
    Document
    



    

开始之前建议给vcode添加一个扩展工具vetur,这样在书写vue文件的时候会有代码提示:

 vue第三天笔记06——vue-cli练习_第1张图片

一、首先,使用vue-cli快速创建一个项目

此处建立了test文件夹,在该文件夹里面创建了项目test

 二、删除App.vue里面的内容,添加新内容

vue第三天笔记06——vue-cli练习_第2张图片 删除内容,添加新内容

三、在src文件夹里面,新建文件夹components,里面放所有template模板

vue第三天笔记06——vue-cli练习_第3张图片 去除id

vue第三天笔记06——vue-cli练习_第4张图片 添加export default

vue第三天笔记06——vue-cli练习_第5张图片 每个template建一个vue

 四、安装所需的依赖包

vue第三天笔记06——vue-cli练习_第6张图片

 五、引入vue-router框架

vue第三天笔记06——vue-cli练习_第7张图片

 六、引入所有组件文件

引入文件格式:import 自己定义的名字 from '文件路径'

vue第三天笔记06——vue-cli练习_第8张图片 七、复制路由的配置

vue第三天笔记06——vue-cli练习_第9张图片

 vue第三天笔记06——vue-cli练习_第10张图片

 八、添加样式

(1)在assets文件夹下建立一个名叫css的文件夹,里面再新建css文件

vue第三天笔记06——vue-cli练习_第11张图片

 vue第三天笔记06——vue-cli练习_第12张图片

vue第三天笔记06——vue-cli练习_第13张图片 效果图

(2)也可以在放在特定模块中

vue第三天笔记06——vue-cli练习_第14张图片

vue第三天笔记06——vue-cli练习_第15张图片 此时的书本、衣服和饮料的样式并没有改变

你可能感兴趣的:(vue-cli)