基于脚手架创建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 相关文章推荐
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
2014/02/04 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
基于Python的关键字监控及告警
2017/07/06 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python extract及contains方法代码实例
2020/09/11 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
创立科技Java面试题
2015/11/29 面试题
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
大学开学计划书
2014/04/30 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
《搭石》教学反思
2016/02/18 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸