• 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 查看我们的初始化项目

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

  • 相关阅读:
    [error]The command could not be located because '/usr/bin' is not included
    hadoop伪分布式
    ssh免密码登录
    移动端中的陀螺仪,摇一摇
    利用百度地图做的定位,获取位置和经纬度
    租房短租发布场地,工作中遇到的复杂日期插件功能
    深入理解定时器系列第三篇——定时器应用(时钟、倒计时、秒表和闹钟)
    BOM之navigator对象和用户代理检测
    jq css3实现跑马灯+大转盘
    Vue小事例
  • 原文地址:https://www.cnblogs.com/beevesnoodles/p/9704028.html
Copyright © 2020-2023  润新知