已经学过无数次,但是每次都忘记,毕竟脑容量太小了,每次都需要翻看原来项目和视频再次学习,所以以此文字形式记录下来,方便于下次使用观看

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页面中,先将之前默认生成的内容删掉,然后再使用<router-link>标签,和前面的用法基本一样。

    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')

    最后在需要使用动画的位置进行添加动画组件和动画样式

    <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomInRight">
            <router-view></router-view>
        </transition>

    (如果引入动画库报错,那就执行npm install css-loader style-loader --save-dev, 然后在webpack.config.js中进行配置。)

    

    完结

    注:如有与其它文章相同内容,请不要惊慌,只是借见下这个知识,这只是个人学习

    

    

记录vue创建项目过程的更多相关文章

  1. redis数据库-VUE创建项目

    redis数据库 ''' 关系型数据库: mysql, oracle 非关系型数据库(nosql): redis,mongodb (没有表的概念) key-value mongodb: json 数据 ...

  2. VUE创建项目

    Vue Cli项目搭建     vue项目需要自建服务器:node 什么是node: 用C++语言编写,用来运行JavaScript语言 node可以为前端项目提供server (包含了socket) ...

  3. vue卸载与安装+vue创建项目

    vue卸载 npm uninstall -g vue-cli npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli ...

  4. vue 创建项目

    先安装node.js环境 #先安装npm 阿里镜像 (之后cnpm 下载组件快速) npm install -g cnpm --registry=https://registry.npm.taobao ...

  5. vue自学入门-2(vue创建项目)

    本人也是刚学习VUE,边找资料,边学习,边给大家分享.1.创建项目 2.启动项目 3.注意上面和下面全部用cnpm

  6. vue 创建项目的命令

    1 cmd   创建项目 找到指定目录 vue create test   或   vue ui  (可视化创建)推荐 ---------------------------------------- ...

  7. Vue创建项目配置

    前言 安装VS Code,开始vue的学习及编程,但是总是遇到各种各样的错误,控制台语法错误,格式错误.一股脑的袭来,感觉创建个项目怎么这个麻烦.这里就讲一下vue的安装及创建. 安装环境 当然第一步 ...

  8. vue创建项目(推荐)

    上一节我们介绍了vue搭建环境的情况,并使用一种方式搭建了一个项目,在这里为大家推荐另一种创建项目的方式. vue init webpack-simple vuedemo02 cd vuedemo02 ...

  9. vue创建项目步骤

    # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...

随机推荐

  1. iOS GCD 使用

    1. dispatch queue的概念 dispatch queue分成以下三种: a)运行在主线程的Main queue,通过dispatch_get_main_queue获取.dispatch_ ...

  2. Java Map 排序

    1. 按照key值排序 对于java中Map的排序,有排序Map,比如TreeMap,对于这个Map,首先只能按照键排序,其次再put和remove的时候由于需要排序,性能上会有所牺牲. 这种方案,使 ...

  3. rsa加解密的内容超长的问题解决

    一. 现象:      有一段老代码用来加密的,但是在使用key A的时候,抛出了异常:javax.crypto.IllegalBlockSizeException: Data must not be ...

  4. Directx11教程(56) 建立一个skydome

    原文:Directx11教程(56) 建立一个skydome       本章建立一个skydome(天空穹),主要学习如何使用cube mapping.      cube map就是把六张纹理当作 ...

  5. SDUT-2144_最小生成树

    数据结构实验之图论九:最小生成树 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有n个城市,其中有些城市之间可以修建公 ...

  6. Effective Modern C++:01类型推导

    C++的官方钦定版本,都是以ISO标准被接受的年份命名,分别是C++98,C++03,C++11,C++14,C++17,C++20等.C++11及其后续版本统称为Modern C++. C++11之 ...

  7. thinkphp php审核后返回信息给html

    1.die("<script>alert('至少选择一个收款方式!');history.back(-1);</script>");

  8. 枚举在switch中的运用

    Season.java package com.sxt.utils.enum2; public enum Season { 春,夏,秋,冬; } TestSeason.java package com ...

  9. 实现ios后台缩略图模糊的一种方法

    http://blog.sina.com.cn/s/blog_64cfe8f00102ux5t.html 今天玩手机(Iphone)发现应用切换支付宝会变模糊,不禁感叹,细节处理的太到位了.   怎么 ...

  10. qt 自定义窗口显示鼠标划过的轨迹

    鼠标事件分为四种: 1.按下 2.抬起 3.移动 4.双击 鼠标事件继承与QWidget void mouseDoubleClickEvent(QMouseEvent *event) void mou ...