美文网首页web前端混合开发
用vue.js初建一个项目(开发环境的搭建)

用vue.js初建一个项目(开发环境的搭建)

作者: 颗颗87 | 来源:发表于2016-11-11 16:14 被阅读34036次

    vue的安装

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器

    在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如WebpackBrowserify模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件

    vue的安装依赖于node.js,要确保你的计算机上已安装过node.js。可进入cmd编辑器,输入命令 node -v进行查看。node尽量要用新一些的版本,否则后续安装会提示node版本过低。去node官网下个新版的node重新安装就可以。如已成功安装node会出现如下:

    node的安装在此就不再说明了。确定node安装后,就可以开始vue的安装了。这里提一下淘宝镜像,用淘宝镜像的cnpm来代替npm的安装,速度会快很多。淘宝镜像推荐网址:https://npm.taobao.org/。成功后同样可查看版本:

    如果使用淘宝镜像安装就输入命令行    $  cnpm install -g vue-cli进行安装,如果没有安装淘宝镜像依旧用$ npm install -g vue-cli安装:

    到此vue已经安装成功了。

    建一个vue项目

    这里我们使用vue官网的命令行工具。Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

    就下来依次执行vue init webpack 输入自己项目的名称,然后进入你建的项目文件夹,此事已经初始化了一个vue项目,但现在项目还无法启动。需要安装相应的脚手架工具,所以继续执行命令行npm install,有淘宝镜像的使用cnpm install,安装成功后你会发现项目里多了个

    文件夹。就是项目启动需要依赖的资源。然后执行最后一句命令,启动一个端口为8080的服务,项目就可以打开。

    便进入vue的欢迎页面,此时你就可以用vue的语法,编写自己的vue项目了。

    相关文章

      网友评论

      • 看不见的未必是幸福:你好,为什么我按照你上面的步骤操作,在$ vue init webpack my-project这一步失败了,请问是什么原因呢,我应该怎么做?
        别打了我承认我帅:写的这么详细 却只有这么点赞 不合情理
        颗颗87: @看不见的未必是幸福 具体报的什么错那
      • 6fbbad961b87:具体的项目写在哪呀 还有 我要布置到服务器怎么弄
        颗颗87:发布服务,在命令行执行npm run build,会生成一个dist文件夹,把这个文件夹放服务器上就可以了
        颗颗87: @strength_7617 建好后,文件夹里自动会生成一个src的文件夹,具体的项目代码,都写在这个里边
      • 9d2221f2195b:npm install 这一步会把所有的依赖包都下载下来,一打开这个项目,电脑就卡的不行不行的,请问楼主怎么破的,求解
        朝花夕拾2022:@文杰_95f0 谢谢 已经解决了
        朝花夕拾2022:@文杰_95f0 请教一下具体怎么操作呢?表示不太明白
        ffd1383f97ff:如果你用的是webstorm,把node_modules文件夹设置为:mark directory as => exclude

      本文标题:用vue.js初建一个项目(开发环境的搭建)

      本文链接:https://www.haomeiwen.com/subject/vfjfpttx.html