java新建项目流程,记录vue创建项目过程
已经学过无数次,但是每次都忘记,毕竟脑容量太小了,每次都需要翻看原来项目和视频再次学习,所以以此文字形式记录下来,方便于下次使用观看
1、打开git,找到创建vue的文件夹(已经安装好git的,然后在存储项目的文件夹下鼠标右键,有个git bash here)
2、命令 vue init webpack-simple 回车(或 vue init webpack-simple 文件夹名)
3、npm(或cnpm) install (如需要安装其它插件输入命令 npm(或cnpm) install 插件名 -D)
4、运行项目命令 npm run dev(退出按ctrl+c)
5、新建组件(用于路由跳转),在src文件夹下面新建一个用于存放组件的文件夹components,在这个文件夹下面新建你所需要的组件文件(如Home.vue, News.vue);
6、安装并配置路由(卸载插件命令 npm uninstall 插件名)
1) 执行命令npm install vue-route --save(或-D)
2) 在src文件夹下面新建一个文件router.config.js进行路由配置(实际项目中,路由会比较多,通常做法是将路由配置单独提出来)
router.config.js文件内容如下:
3) 将配置的路由放置在一个数组里面,然后需要在入口文件main.js中引入这个数组。在引入前先需要引入上面下载的路由
main.js文件中内容如下:
4) 页面渲染
在设置好路由后,需要将匹配的路由进行渲染,在App.vue页面中,先将之前默认生成的内容删掉,然后再使用标签,和前面的用法基本一样。
App.vue文件中内容如下:
5)使用动画
在路由中使用animate.css的动画库,使用前先引入资源
首页安装animate.css npm install animate.css(在src文件夹下面的assets这个文件夹下面新建一个文件css文件,然后将下载的animate.css放在css文件夹下面。)
然后在main.js中引入这个样式文件import 'animate.css/animate.min.css'(或 './assets/css/animate.css')
最后在需要使用动画的位置进行添加动画组件和动画样式
(如果引入动画库报错,那就执行npm install css-loader style-loader --save-dev, 然后在webpack.config.js中进行配置。)
完结
注:如有与其它文章相同内容,请不要惊慌,只是借见下这个知识,这只是个人学习
java新建项目流程,记录vue创建项目过程相关推荐
- 从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。 从头开始。...
从头开始vue创建项目 Do you ever read an article on Medium (or elsewhere) about passive income, side projects ...
- vue创建项目报错command not found:create-webpack
vue创建项目报错command not found:create-webpack vue创建项目报错command not found:create-webpack,请不要怀疑,是你创建项目命令写错 ...
- 【Python • 项目实战】pytesseract+pyqt实现图片识别软件小项目——(一)创建项目和画界面
本文默认你已经学习了上一篇文章,如果你还没有学习,就赶快去学习吧.关注博主,学习更多内容. 文章目录 前言 一.创建项目 1. 从模板创建项目 2. 使用pycharm打开项目 3. 安装Pyqt5库 ...
- springboot初始化项目慢,springboot创建项目慢
================================ ©Copyright 蕃薯耀 2020-06-23 https://www.cnblogs.com/fanshuyao/ spring ...
- ui vue 创建项目教程 并关闭语法_创建vue项目流程
创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目. (1)安装 确认已安装了node.js ...
- vue创建项目流程与环境搭建
vue项目环境版本: node -vv16.13.0 npm -v8.1.0 vue -V@vue/cli 4.5.15 创建步骤 1. 创建项目 vue create 项目名称 第一步 ...
- vue创建项目踩坑记录 443 ECONNRESET
安装nodejs 并创建vue 项目的记录 首先安装nodejs 是傻瓜式操作,配置环境变量的可以参考这个博文: 点击跳转安装教程 查看node版本和npm 版本 使用淘宝镜像cnpm 第二步项目初始 ...
- Vue项目环境搭建及创建项目流程
安装node.js环境 1)安装node.js环境 下载地址 我下载的版本是14.16.0 2)选安装目录进行安装,我选在E盘nodejs目录下 3)测试,在命令提示符下输入命令 nod ...
- vue 创建项目并添加路由(Vue路由入门教学,图文详解)
注:初学vue,如有错误.请指教,谢谢! 1.vue-cli 1.1 介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 1.2 下载vue-cli 在命令行下运行 npm ins ...
最新文章
- 【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
- lucene查询语法,适用于ELk:kibana查询
- 今日头条CEO朱文佳:新一代搜索引擎已经来了
- ios找不到信任证书_ios信任苹果企业级应用
- HTML5的明天,局部有小雨
- python pycharm 如何绘制类图 关系图 继承图 父子图?
- 1.7 编程基础之字符串 33 判断字符串是否为回文 python
- 再次理解javascript中的事件
- 在CentOS 7上安装使用Kubernetes:管理云平台多个主机上的容器化应用
- ubuntu下,apt的参数使用,很实用呦
- java实现微信公众平台中的字典排序
- 7-2 天梯地图 (30分)_「月夜枫YYF」不会吧不会吧,枫哥失守8000分阵地!
- Expected value at 1:0 异常解决方法
- 学计算机编程笔记本电脑推荐,想选一款笔记本电脑,主要用来学编程,有什么好的推荐吗?...
- 自控原理学习笔记-反馈控制系统的动态模型(3)-开环、闭环特征模型
- CoolShell-第4题
- 【期末复习】网络安全技术(双语)
- window安全中心关闭防火墙后仍然会将xx文件删除的解决办法
- c语言用二维数组遍历 “tic tac toe“ 输出游戏结果
- 小学-知识与能力【10】
热门文章
- 猫盘群晖DSM7.0测试版降级6.2.3教程
- 什么是背光源?光源的种类
- STM32系列(HAL库)——F103C8T6硬件SPI点亮带字库OLED屏
- Gitlab上的项目相关删除操作
- 【Go实战 | 电商平台】(7) 图片上传到七牛云
- iOS三种让UILabel中的text居上的方式
- STM32的串口通讯协议
- linux重定向操作
- oracle池式连接超时,oracle连接由于防火墙设置导致超时的问题
- error: non-const lvalue reference to type cannot bind to a value of unrelated type