基于脚手架创建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 相关文章推荐
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
解决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
mysql limit查询优化分析
2008/11/12 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP crc32()函数讲解
2019/02/14 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
js的三种继承方式详解
2017/01/21 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
pandas 将索引值相加的方法
2018/11/15 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
python Shapely使用指南详解
2020/02/18 Python
python palywright库基本使用
2021/01/21 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
五好关工委申报材料
2014/05/31 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014公司年终工作总结
2014/12/19 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS