zoukankan      html  css  js  c++  java
  • Day 84 VUE——脚手架

    VUE——脚手架

    单文件组件介绍

    vue-cli3 开发单文件组件

    目前使用 vue 存在的缺点

    1.全局定义组件的名字不能重复

    2.字符串模板,es6 虽然提供了模板字符串,但需要特殊符号时,整个模板就会显得不整洁

    3.不支持 css

    4.没有构建步骤

    单文件组件可以解决以上问题,在 vue 中把 .vue 的文件称为 单文件组件,webpack 构建工具可以识别 .vue 文件

    安装Vue-cli3脚手架

    第一步:官网下载并安装 node 

    第二步:检测 node 是否安装成功 命令行:node -v 查看版本

    第三步:为了以后下载安装插件便利,安装淘宝镜像源

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    以后 npm 可以代替 cnpm 

    第四步:安装 Vue Cli3 脚手架

    cnpm install -g @vue/cli

    第五步:检查其版本是否正确

    vue --version

    快速原型开发

    使用 vue server 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要额外安装一个全局的扩展

    npm install -g @vue/cli-service-global

    vue server 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发

    新建项目

    选中需要文件夹,在终端打开

    第一步:npm init  初始化,可以设置项目名、版本、作者等信息,不需要设置的直接回车

    第二步:在文件中查看生成的 package.json 文件

    第三步:新建 App.vue 文件,编写组件信息

    <template>
        <div>
            <h3 class="active">{{msg}}</h3>
        </div>
    
    </template>
    
    <script>
    export default {
        data(){
            return{
                msg:'这个是个脚手架'
            };
        }
    };
    </script>
    
    <style scoped>
        .active{
            color: red;
        }
    </style>
    App.vue

    第四部:在终端使用 vue serve ,使其在浏览器中打开

    这种方法仅限于快速原型开发,归根结底还是要使用 vue.cli3 来启动项目

    vue-cli3生成项目

    第一步:创建项目 vue create mysite

    第二步:选择 Manually select features,首次创建项目需要设置模板,使用空格进行选中,最后设置模板名称,在下次创建项目时可以直接使用

    第三步:进入项目目录 cd fileName

    第四步:启动项目 npm run serve

    Vue中使用第三方组件(element-ui)

    第一步:安装 npm i element-ui -S,在 vue-cli 中可以使用 vue add element 安装

    第二步:引用

  • 相关阅读:
    Quicksum -SilverN
    uva 140 bandwidth (好题) ——yhx
    uva 129 krypton factors ——yhx
    uva 524 prime ring problem——yhx
    uva 10976 fractions again(水题)——yhx
    uva 11059 maximum product(水题)——yhx
    uva 725 division(水题)——yhx
    uva 11853 paintball(好题)——yhx
    uva 1599 ideal path(好题)——yhx
    uva 1572 self-assembly ——yhx
  • 原文地址:https://www.cnblogs.com/ysging/p/13488300.html
Copyright © 2011-2022 走看看