使用vscode创建一个简单的vue项目
1、Node.js 官网下载地址 Node.js 下载
Node.js安装完后可以打开cmd输入下面两个命令查看是否安装成功（npm是同时安装的）
node -v
npm -v
2、VScode官网下载地址 VScode下载
安装完VScode后再安装vue插件vetur和ESLint，实现支持vue文件的代码高亮
安装插件：点击左边的Extensions图标，输入vetur，找到高版本的安装即可（同样方式安装ESLint插件）
安装好插件看到的代码如下图所示：
安装好的VScode是英文版的，想要中文版的话就要下载安装Chinese插件（安装方式和上面两个插件的方式一样）
安装好的VScode是只能打开一个代码标签，不能同时打开多个，想要同时打开多个的话就要添加一个配置，如下图：
效果如下图：
3、安装好VScode和node.js后就可以全局安装vue-cli（脚手架），可以帮助我们快速构建vue项目
打开VScode的终端，输入命令npm install -g vue-cli，然后回车
4、安装webpack，它是打包js的工具，安装命令：npm install -g webpack
5、安装完成之后就可以开始创建vue项目，首先创建一个文件夹用来存放你的项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹就是vue_code。
创建项目命令：vue init webpack vue-test，其实vue-test就是项目的名称
接着会出现一些配置项，可以根据需要配置，也可以默认，直接按回车。
然后继续等待安装依赖项。完成之后，一个基本的 vue项目就搭建完了。在Extensions（资源管理器）里打开刚才创建的vue项目，就是打开vue-test这个文件夹，其中main.js就是入口。
6、接着就是运行项目，如果不是项目的文件夹就要先跳到项目文件夹，输入命令：npm run dev
成功之后就在浏览器里输入http://localhost:8080，看到如下画面就是成功了
7、最后就是项目打包发布，输入命令：npm run build ，完成之后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好了。
使用vscode创建一个简单的vue项目相关推荐
- 搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单 默认点击安装 ...
- 搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- 创建一个简单的springboot项目demo
springboot的核心功能: 1:起步依赖 2:核心注入; 创建一个简单的springboot项目demo步骤: 1:创建一个maven项目 2:pom.xml添加起步依赖 <parent& ...
- 搭建一个简单Django+vue 项目
简介: Django是python的web开发框架,采用了MTV的框架模式,即模型Model,视图View和模版Template. 各自的职责为: 模型(Model),即数据存取层:如何存取.如何验证 ...
- Intellij Idea创建一个简单的java项目
2016年11月12日 我即将要离开象牙塔(校园),踏入社会,想想未来我是某个公司的一个程序员,再对比一下小时的梦想,好像出入挺大的.今天我不得不为即将的工作准备,一个java开发工程师,但是我现在是 ...
- linux怎么创建一个c文件,如何在Ubuntu Linux中创建一个简单的C项目
描述 步骤1:将VirtualBox安装到您的计算机上 VirtualBox是Oracle的一个产品,允许您运行虚拟机您的计算机意味着您可以在Windows或Apple计算机上运行Linux. 转到h ...
- [使用心得]maven2之m2eclipse使用手册之六使用Maven2插件创建一个简单的SSH2项目之jetty篇(一)...
上次介绍了怎么在eclipse中添加本地依赖类,这次带来的是一个简单的SSH2整合maven-jetty-plugin的例子,jetty估计都不陌生了,它是一个基于是一个开源的servlet容器,它为 ...
- C# 创建一个简单的WebApi项目
一.创建Web API 1.创建一个新的web API项目 启动VS 2013,并在"开始页"选择"新项目".或从"文件"菜单选择" ...
- 创建一个简单的flask项目步骤
创建一个flask项目目录(结构配置,SQLAlchemy,邮件,消息闪现等) 展示一下当前的目录结果 |-feng7309 # 项目文件夹 |--|apps # 统一管理所有的蓝图信息 |--|-- ...
最新文章
- linux进程间通信：无名管道 pipe
- HALCON示例程序check_fish_stick_dimension.hdev生鱼棒尺寸测量；基于形态学的像素级精度尺寸测量
- 用offset调用文章
- Open Source Blog 开源ASP.NET/C# 博客平台 v2.5 发布（提供源码下载）
- pythontuple([1、2、3)_Python 语句\nprint(tuple([1,2,3]))\n的运行结果是
- spark 提交至yarn异常超时 Client cannot authenticate via:[TOKEN, KERBEROS]
- controller接收json数据_SpringMVC实现多种数据类型绑定
- php链接mysql编码错误_php 操作 mysql 数据库 编码 错误
- 【华为云技术分享】《跟唐老师学习云网络》— Ping喂报文
- 维控触摸屏编程手册_维控触摸屏AB PLC地址编辑说明
- 计算机实验室安全员责任书,实验室安全目标责任书
- 颜色名称及色样表(HTML版)
- 计算机桌面怎么改为d盘,WinXP桌面路径修改成D盘的步骤
- 手机OTG是什么功能，怎样使用？
- Windows XP默认用户自动登录
- 名帖234 俞和 行书《云锦帖》
- 润物无声：java的字符串操作
- 嚼得菜根做得大事·《菜根谭》·十
- 【翻译】西川善司的「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，后篇...
- 为何我工作十年，内心仍无比恐慌（腾讯产品总监曹菲）