• 课时2 VueCli3+Ts实战项目-文件结构目录



    先安装node环境

    安装最新的vue cli
    https://cli.vuejs.org/guide/installation.html
     

    npm install -g @vue/cli


    卸载之前电脑安装的2.0的vue cli:npm uninstall vue-cli -g

    vue -V或者是vue --version 查看是否安装成功了




    选择第二个,如果选了第一个的话,就指挥安装babel和eslint

    鼠标指过来,只需要回车就可以选中这个复选框了。选完后点击回车。





    是否使用router?yes




    不保存


    看到这样画面就表示成功了。

    启动项目




    文件结构目录



    index.html是入口文件。

    babel.config.js是babel的设置文件。

    package.json:模块依赖。

    设置TypeScript所用到的东西。

    src目录

    assets放静态文件,图片等

    components放封装的组件。

    views就是试图。

    就是页面上所看到的组件。都会放在views文件夹下 。

    App.vue就是根组件。

    个之前看到的main.js是一样的,入口函数的文件。

    router.ts就是设置路由

    store.ts就是Vuex存储的。

    shims-tsxd.ts告诉当前项目,可以识别以jsx结尾的文件。然后在vue项目里面可以使用jsx写代码。

    当前的ts可以识别vue文件。告诉ts导入.vue的文件。然后通过vue constructor处理文件。


    当前写的代码 ,和我们之前的写的vue的代码有很大的不同,因为我们使用的是ts。

    比如说装饰器,这里看到的带@符号的就是我们的装饰器了。

    创建的类Home要继承Vue这个类。这是我们基本的结构

    vue-property-decorator就是装饰器。



    里面有7个装饰器和一个函数。

    在ts里面有个很重要的概念就是装饰器。定义一些属性等。

    代码调整

    首先把Home和About.vue这两个文件删除。

    comonents里面的文件也删除。

    App.vue里面router-link这两个标签也删掉。

    只留下一个router-view

    css4也基本都删掉了。

    设置高度和宽度都是100%

    创建一个新的组件

    快捷键

    自动生成基本的代码。

    这里我们不再使用这种形式了。

    div.home生成一个class为home的div



    从vue-proptery-decorator里面引入component和vue

    然后就是使用这个装饰器@Component。
    装饰器就是对现有的类或者函数进行扩展和补充。

    这样下面的代码,才是一个完整的组件了。

    router.ts

    这里删掉。

    这里是Home

    引入css

    pubic下新建css的文件件,然后粘贴一个reset.css文件进来。 可以在下面注释的网址上下载下来这个css文件。
    这是对我们当前的样式进行初始化。

    引入reset.css

    修改页面的title

    然后添加html和body的样式

    页面展示


    console没有任何的报错

    结束

  • 相关阅读:
    iperf/iperf3网络测试工具的安装与使用
    驱动模块(4)——模块编译
    760. Find Anagram Mappings
    MySQL面试题
    MySQL 的数据存储引擎
    203. Remove Linked List Elements
    数据库事务隔离级别
    232. Implement Queue using Stacks
    MySQL中的事务
    482. License Key Formatting
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/12634924.html
Copyright © 2020-2023  润新知