美文网首页
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搭建笔记

    如何搭建安装vue环境? 请看教程 Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) w...

  • Vue入坑教程(二)——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍。具体可以查看《vue 入坑教程(一)—...

  • Vue+Electron

    坑爹的,发现electron+vue的话,应该先安装vue。 创建vue项目 前提已安装vue-cli脚手架。 d...

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

    介绍 Vue.js是一套构建用户界面的渐进式框架。 Vue只关注图层,采用自底向上增量开发的设计。 Vue的目标是...

  • 脚手架安装

    Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli) 2017.03.01 10:34*字数...

  • 使用vue-cli搭建vue项目

    vue-cli vue的脚手架 安装脚手架之前需要安装node.js 安装脚手架 安装vue-cli 创建vue项...

  • VUE2.0使用自己封装的插件

    入坑vue,步步为坑,记个笔记。 自己封装了个插件,想在vue-cli搭建的脚手架中使用,搞了半天引用不了。查阅文...

  • VUE----使用脚手架创建vue项目

    学习了vue的基础之后尝试使用脚手架创建一个vue项目 1.全局安装vue脚手架: 安装完成之后,vue脚手架文件...

  • Vue创建项目

    1、安装vue npm install vue -g 2、安装vue-cli脚手架 npm install --g...

  • npm相关

    Vue:1,使用Vue需要用到脚手架 vue-li,安装的时候用webpack-simple安装脚手架2,使用之...

网友评论

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

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