• Vue2.5笔记:如何在项目中使用和配置Vue


    最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。

    <script src="../xxx.js"></script>

    Vue 我们也可以这种引入的方式

    <div id="root">{{name}}</div>
    <script src="./dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'Vue'
            }
        })
    </script>

    随着前端的发展我们出现了模块化的开发方式,例如异步(AMD)、同步(CommonJS)等等。

    在我们正式开始 Vue 项目开始的时候,我们现在安装一个 Vue Devtools 一个官方的 Vue 调试 chrome 插件,安装之后我们在 chrome 的控制台就可以看到我们创建的 Vue 的对象实例。

    Vue-CLI

    Vue 给我们提供了上述所有方式的项目引入方式,不但如此,Vue 还给我们提供了一个目前非常流行,非常牛逼的脚手架(Vue CLI )工具,它能在短短的几分钟之内就能构建一个完整的单页面应用 (SPA)项目。其中包含:热加载、校验、打包等构建项目等工具;下面我们来一步一步的构件一个新的项目。

    安装工具

    //npm
    npm install -g @vue/cli

    //yarn
    yarn global add @vue/cli

    安装完成以后我们验证下有没有安装成功,执行下面命令后如果安装成功后,会显示版本号,我安装的版本是 3.0.4

    vue --version

    如果你和我一样恭喜你你安装成功了,如果没有安装成功你可以查看下权限的问题或者该用 cnpm 试试。

    安装成功之后,我们执行以下命令就可以创建一个完整的项目案例。

    vue create my-project

    执行上述命令以后,会让我们选择是按照默认(default)的配置,还是选择执行配置,如果你已经非常熟悉了脚手架工具或者默认的配置你满足不了你的需求,你可以选择自己行配置,不过这里还是建议不太熟悉的同学还是使用默认配置就行。

    等待安装完成之后,我们执行下面命令就可以看到我们的初始化项目了。

    cd my-project
    npm run serve 

    我这里给的是 8080 端口,我们本地访问 localhost:8080 查看我们的初始化项目

    是不是很酷,我们的第一个项目已经就这样创建完成,接下来我们就慢慢的去开始我们的项目开发吧。加油!

  • 相关阅读:
    JDBC_批处理Batch_插入2万条数据的测试
    JDBC_ResultSet结果集用法_游标原理_关闭连接问题
    JDBC_PreparedStatement用法_占位符_参数处理
    python_字符串_常用处理
    R-biomaRt使用-代码备份
    R-描述性统计
    django开发傻瓜教程-3-celery异步处理
    Head First Java-图形化界面
    javascript隐藏和显示元素以及清空textarea
    Entrez Direct
  • 原文地址:https://www.cnblogs.com/beevesnoodles/p/9704028.html
Copyright © 2020-2023  润新知