美文网首页
Vue入坑记---(1)Vue脚手架安装

Vue入坑记---(1)Vue脚手架安装

作者: 年轻即出发_dc22 | 来源:发表于2018-12-28 20:03 被阅读0次

    介绍

    Vue.js是一套构建用户界面的渐进式框架。

    Vue只关注图层,采用自底向上增量开发的设计。

    Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

    工具:

    node.js环境(npm管理环境)

    webpack打包工具

    安装node.js

    node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了。

    安装完成后,打开命令行工具输入命令node -v,如果出现对应版本号,就说明安装成功了。

    我们所需要的npm包管理器,是集成在node中的,所以,直接输入npm -v就会显示出npm的版本信息。

    到这里node的环境已经安装完了,npm包管理工具也有了,但是由于npm的有些资源被墙,为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。

    注意:安装Vue依赖的时候,尽量少用cnpm,因为安装过程中可能丢失东西。

    安装webpack

    直接在命令行输入:

    npm install webpack -g

    安装成功后点击webpack -v,出现对应版本号则安装成功。

    Vue安装

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

    $ npm install vue

    安装vue-cli脚手架构建工具

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

    $ cnpm install --global vue-cli

    使用vue -v查看vue版本

    创建一个基于webpack模板的新项目

    vue init webpack 自定义项目名称

    注意:如果不想填直接回车默认就好;项目的名称不能大写,不然会报错。

    安装项目所需的依赖

    npm install

    注意:如果一直报错的话,就多次安装依赖

    运行项目

    npm run dev


    相关文章

      网友评论

          本文标题:Vue入坑记---(1)Vue脚手架安装

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