基于脚手架创建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返回顶部的按钮实现方法
Jan 09 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
jQuery操作cookie
Aug 08 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
element跨分页操作选择详解
Jun 29 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
基于mysql的论坛(4)
2006/10/09 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
python中from module import * 的一个坑
2014/07/20 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
护士实习鉴定范文
2013/12/22 职场文书
3分钟演讲稿
2014/04/30 职场文书
森林病虫害防治方案
2014/06/02 职场文书
最美家庭活动方案
2014/08/31 职场文书
小王子读书笔记
2015/06/29 职场文书
驻村工作简报
2015/07/20 职场文书
感恩主题班会教案
2015/08/12 职场文书