Vue2.0搭建脚手架


Posted in Vue.js onMarch 13, 2022

一、安装node.js

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

Vue2.0搭建脚手架

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

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

Vue2.0搭建脚手架

安装完成以后进入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。如下图所示:

Vue2.0搭建脚手架

 

注意:g表示全局安装。

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

Vue2.0搭建脚手架

2、检查是否安装成功

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

Vue2.0搭建脚手架

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

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

$ vue init webpack my-app

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

Vue2.0搭建脚手架

 

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

Vue2.0搭建脚手架

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

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

Vue2.0搭建脚手架

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

Vue2.0搭建脚手架

注意:服务启动以后,就不能关闭了

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

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

Vue.js 相关文章推荐
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 #Vue.js
Vue如何清空对象
Mar 03 #Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
You might like
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
django2.0扩展用户字段示例
2019/02/13 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
利用python画出AUC曲线的实例
2020/02/28 Python
如何写python的配置文件
2020/06/07 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
中学生操行评语
2014/04/24 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
工会趣味活动方案
2014/08/18 职场文书
团队拓展活动总结
2014/08/27 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
五一放假通知怎么写
2015/08/18 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers