基于脚手架创建Vue项目实现步骤详解


Posted in Javascript onAugust 03, 2020

第一步 准备工作

1.下载安装Node.js

验证是否安装的方法,在命令行输入node -v

2.安装Vue

在命令行输入npm install -g @vue/cli

查看Vue版本号 npm vue --version

如果Vue版本太低,先卸载Vue低版本 npm uninstall vue-cli -g

第二步 创建Vue项目

1. 打开要创建路径

基于脚手架创建Vue项目实现步骤详解

2-1.vue CLI3版本输入vue create test创建名为test的项目

 接下来会问你一系列的问题

Please pick a preset:(Use arrow keys)//选择使用什么样的工具,两个选项:

1.default (babel,eslint)

//默认

2.Manually select features

//自定义,按空格选中

Where do you prefer placing config for Babel, PostCSS,ESLint,etc.?(Use arrow keys)

//每一个配置都生成一个配置文件还是都生成在package.json中

1.In dedicated config files

//在专用的配置文件

2.In package.json

//在package.json

Save this as a preset for future projects?(y/n)

//保存刚刚选择的配置

1.y

Save preset as:

//保存配置的名字

2.n

等待安装……

安装完成后,输入cdtest进入项目文件夹中

npm run serve启动项目

2-2.vue CLI2版本输入vue init webpack demo //项目是基于webpack的 项目名demo

 接下来会有如下提示

Project name(工程名):回车

Project description(工程介绍):回车

Author:输入作者名

Vue build(是否安装编译器):回车

Install vue-router(是否安装Vue路由):回车

Use ESLint to lint your code(是否使用ESLint检查js代码):n

Set up unit tests(安装单元测试工具):n

Setup e2e tests with Nightwatch(是否安装端到端测试工具):n

Should we runnpm installfor you after the project has been created? (recommended):回车。

第三步 启动项目

  • 进入项目目录:cd demo
  • 安装项目所需要的依赖:npm install
  • 启动项目:npm run dev

启动成功,浏览器打开:localhost:8080,即可看到vue项目。

目录结构

基于脚手架创建Vue项目实现步骤详解

package.json

基于脚手架创建Vue项目实现步骤详解

基于脚手架创建Vue项目实现步骤详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
js常用正则表达式集锦
May 17 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 #Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 #Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 #Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 #Javascript
简单了解three.js 着色器材质
Aug 03 #Javascript
Element InputNumber 计数器的实现示例
Aug 03 #Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 #Javascript
You might like
ftp类(myftp.php)
2006/10/09 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
python django集成cas验证系统
2014/07/14 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Django框架反向解析操作详解
2019/11/28 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Django ModelForm操作及验证方式
2020/03/30 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
Java基础类库面试题
2013/09/04 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
网络研修随笔感言
2015/11/18 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android