Vue2.0搭建脚手架

一、安装node.js

1、进入官网https://nodejs.org/en/download/

根据电脑操作系统，选择相应版本的文件进行下载。

2、下载文件后双击进行安装

安装完成以后进入node.js的安装目录：D:\Program Files\nodejs\（这里是我本机安装的目录，其他机器目录可能不同），你会发现里面自带了npm，直接用npm安装环境即可。

二、安装cnpm

  • 说明：npm(node package manager)是node.js的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）。
  • 使用npm安装插件：命令提示符执行 npm install <name>。
  • 选装cnpm。因为npm安装插件是从国外服务器下载，受网络影响大，可能会出现异常，如果npm的服务器在中国就好了，于是我们乐于分享的淘宝团队干了这事。来自官网：“这事一个完整npmjs.org镜像，你可以用此代替官方版本（只读），同步频率目前为10分钟一次，尽量保证与官方服务同步。”；　　
  • 安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org。
  • 查看版本：输入cnpm-v，可以查看当前cnpm的版本。

注意：安装cnpm的时候不是安装在node.js安装的地方，要在创建的项目目录下面安装。

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

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

1、安装命令

命令：$ cnpm install vue-cli -g。如下图所示：

注意：g表示全局安装。

出现如下的界面表示安装完成：

2、检查是否安装成功

安装完成之后输入 vue -V（注意这里是大写的"V"），如下图所示，如果出现相应的版本号，则说明安装成功。

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

要创建项目，首先我们要选定目录，然后在命令行中把目录转到选定的目录。可以使用下面的命令：

$ vue init webpack my-app

注意：my-app为自定义的项目名称,自定义的项目名称中不能包含大写字母。

输入命令以后直接按回车执行：

运行初始化命令的时候会让用户输入几个基本的选项，如项目名称、描述、作者等信息。例如：

Project name (myvuedemo) ：项目名称，这里是myvuedemo。

Project description (A Vue.js project)：项目描述，这里是“我的第一个Vue项目”。

Author：作者。

Install vue-router? (Y/N)：是否安装Vue路由，也就是以后是spa(但页面应该需要的模块)。

Use ESLint to lint your code?（Y/N）：使用ESLint到你的代码。

Pick an ESLint preset (Use arrow keys)：选择一个预置ESLint（使用箭头键）。

Set up unit tests (Y/n) y：设置单元测试。

Setup e2e tests with Nightwatch? (Y/n) ：设置端到端测试。

五、运行项目

输入下面的命令：$ cnpm run dev。

运行成功以后，根据提示，在浏览器中输入http://localhost:8080,浏览器显示的页面如下：

注意：服务启动以后，就不能关闭了

到此为止，Vue.js的脚手架搭建完成。

到此这篇关于Vue2.0搭建脚手架的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 webpack 配置,优化. 准备工作 @vue/cli@4.1.1 vue 2.6 node v12.13.0 安装 node 安装 node 全局安装 nrm,npm 的镜像源管理工具. npm i nrm -g // 安装 nrm ls // 查看可用源,及当前源,带*的是当前使用的源 nrm use taobao // 切换源,使用源 nrm add <registry> <url

  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • vue脚手架搭建项目的兼容性配置详解

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 (推荐阮一峰老师的文章https://www.jb51.net/article/

  • 仿vue-cli搭建属于自己的脚手架的方法步骤

    脚手架是啥 从前我总觉得脚手架是个很高大上的东西,好像得牛叉:ox:一点的人才写的出来,可望而不可即.其实并不是因为困难使我们放弃,而是因为放弃才显得困难(这是个好词好句:see_no_evil:).只要你肯花个一天半天的时间:fist:,也能写出属于你自己的脚手架. 早前脚手架这个词是从 vue-cli 这里认识的,我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能初始化好一个自己的项目,真是

  • 使用vue-cli（vue脚手架）快速搭建项目的方法

    使用vue-cli（vue脚手架）快速搭建项目的方法

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错: 创建vue-cli工程项目时的报错 在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个"过低"问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭

  • vue.js之vue-cli脚手架的搭建详解

    vue.js之vue-cli脚手架的搭建详解

    相比于主流的angular和react前端框架,vue在近年来也变得非常火热.他吸取了前两者的优点,同时学习曲线也更加平缓.所以本魔王准备入坑了~~ 首先从vue的脚手架搭建开始吧. 这里不得不吐槽,window相对mac和linux确实在软件开发方面,非常不方便,代码打包,环境搭建等,简直爆炸~~..然而,嗯,本魔王就是在用win10,哎~ 嘛,废话不多说,今天的任务就是把脚手架搭好,虽然流程不麻烦,但是npm这个东东,真的可以一不小心就磨掉一下午的时间.这里无论用命令行工具,还是Git Ba

  • vue-cli脚手架搭建的项目去除eslint验证的方法

    eslint验证,为我们提升我们的代码质量和良好的编码风格带来了非常大的帮助,但是由于其语法验证的严格,很多程序员在初期使用的时候很不适应,就想怎么能够去掉eslint验证. 其实把eslint验证去除的方法并不复杂,因为我们的脚手架是基于webpack的,那么一般的配置操作都会在webpack工具的配置文件中进行配置,那么我们就直接找webpack的配置文件就可以了.可能我们的很多刚开始接触vue-cli脚手架工具的朋友可能会说我搭建完项目后,build目录下有3个webpack开头的配置文件

  • 使用vue脚手架（vue-cli）搭建一个项目详解

    1.首先得下载node.js.方法可自行百度. 2. 3.一开始报很多错误,后来用管理员就没问题了. 4. 5.如上图会遇到卡住的问题,解决方法是 在最后一个选项上选择No,I will handle it myselft,然后cd vue_test,然后cnpm install,这样就成功了,然后执行npm run dev就出现: 6.浏览器端访问localhost:8081 7.项目目录 8.图片来源于网络 以上所述是小编给大家介绍的vue脚手架(vue-cli)搭建项目详解整合,希望对大家

  • 使用vue-cli脚手架工具搭建vue-webpack项目

    最近更新了webpack配置详解,可移步vue-cli webpack详解 对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过

  • 使用webpack搭建vue项目实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率.而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一. 所以今天特意一步步通过webpack配置,实现与vue-

  • vue脚手架搭建过程图解

    vue脚手架是个好东西,能够快速搭建vue单页面应用,vue是基于node环境的,所以要先安装node,去官网下载安装就可以. 进入某个文件夹的命令为: 查看node版本: 搭建步骤为: 出现下图说明搭建成功: 按照提示输入: 如果出现下图说明运行成功: 在浏览器中按照指示输入: 运行结果为: ok,至此vue脚手架就搭建完成了! 总结 以上所述是小编给大家介绍的vue脚手架搭建过程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 详解如何使用vue-cli脚手架搭建Vue.js项目

    详解如何使用vue-cli脚手架搭建Vue.js项目

    1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admin $ cd vue-admin $ npm install $ npm run dev 后面分步说明. 2. 安装 前提条件,Node.js >=4.x版本,建议使用6.x版本.npm版本 > 3.x 全局安装vue-cli $ npm install -g vue-cli 3. 使用 $ vue init

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • 从0搭建vue-cli4脚手架

    之前写了两期前后端分离的SpringBoot项目,从0搭建到整合Mybatis,但是只有后端没有前端的项目是不完整的,所以今天更新一篇从0搭建vue-cli4脚手架. 准备工作,有点类似java的jdk 安装node.js 直接去官网下载就可以https://nodejs.org/zh-cn/ 选择长期支持版,下载好后直接无脑下一步就可以了. 确认node.js安装成功: cmd下输入 node -v 或 npm -v 能输出相应版本号即可 安装node.js淘宝镜像加速器(cnpm) 类似配置

随机推荐