Vue项目启动

简介: Vue项目启动

1、创建Vue项目:vue create vue-test

20c4763c94e14bd487be29d84a86ed1e.png

2、选择人工创建(不需要那么多配置,省时间)


0248b59ac0b14c59b7b2f903cb7e2bbd.png


2.1选择(Babel、Router、Vuex)

2f865143fb244a7aae983a46ad569e37.png

3、启动项目(npm run serve)


98e9fde729ad48b58677d694b1a68aa2.png


4、项目组成


598ef106c3f04d5d9a3269f6f83c08dd.png


5、在views创建一个List.vue


dc666a28e3c54e979edc388aab7f74ac.png


6、在router导入路径/list

899263e73f874222952c3ba2d8866327.png


7、访问/list

fdcf40d6c66e44b194a9a081df940cd3.png


8、设置(index.html)移动端界面,不允许放大缩小,不允许用户点击放大缩小


a6fad50d82ff4828ae5d439753443b4b.png


9、创建Header.vue


792a2029850e4072a27b7986be7a0a02.png


10、引入到HomeView.vue中


a4df205ce93d46e3a038aa46cd346589.png

11、页面显示(Alt+Shift+F即可对vue文件进行格式化)

6508954876b84d3bbde1242d263b2e85.png

12、导入Swiper


官网:https://www.npmjs.com/package/vue-awesome-swiper


12.1下载Swiper(npm install swiper vue-awesome-swiper --save)

24f1a7758fe446a6af67ee59dad90245.png

12.2在main.js中全局导入Swiper

ba7a12bacdec4868b3ac863a00eb18da.png


13、创建Swiper.vue

e37b89c49ddc4c8984bdd5cf6251c5e9.png

相关文章
|
3天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
19 2
|
2天前
|
缓存 JavaScript 前端开发
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
《基础篇第4章:vue2基础》:使用vue脚手架创建项目
11 3
|
2天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
5 2
|
2天前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具,使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令,可以提高开发效率,增强应用的功能和用户体验。
|
3天前
|
JavaScript
|
4天前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
24 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
1天前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
7 0
|
2天前
|
JavaScript UED
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令,可以为 Vue 应用带来更多的灵活性和扩展性,提高开发效率和用户体验。
|
3天前
|
JavaScript 前端开发 容器
vue的哈希模式下乾坤微应用的使用
vue的哈希模式下乾坤微应用的使用
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1042 0