使用vscode开发vue项目
前端vue + vant学习
1、开发工具选用Visual Studio Code,地址:https://code.visualstudio.com/Download
插件安装
- Auto Close Tag
- Auto Rename Tag
- Beautify
- Chinese
- CSS peek
- Document This
- ESlint
- filesize
- Gitlens-Git supercharged
- HTML CSS support
- HTML snippets
- Java Server pages
- Language Support for Java
- Live server
- open in browser
- Path Autocomplete
- Path Intellisense
- PostCSS syntax
- postcss-sugarss-language
- Vetur
- VS Code CSS Comments
- vscode-icons
- Vue 2 Snippets
- VueHelper
2、使用脚手架开发,安装node.js,地址:https://nodejs.org/en/
安装完成后,执行npm -v 出现版本号则表示安装成功。
3、全局安装vue-cli,执行命令npm install
-g vue-cli
4、创建项目文件件,命令行进入文件夹,执行创建工程命令
vue init webpack projectName
在安装时会询问你:
①、Project name (sanfeng1);项目名称(sanfeng1)。(确定按enter,否按N)
②、 Project description (A Vue.js project);项目描述(一vue.js项目)。(随意输入一段简短介绍,用英文)
③、Author (sunsanfeng);作者(sunsanfeng)。(确定按enter,否按N)
④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere;Vue公司的建立(使用箭头键)>运行时+编译器:大多数用户推荐运行时间:约6kb轻民+ gzip,但模板(或任何Vue具体HTML)只允许在。VUE文件渲染功能是必需的其他地方。(按enter)
⑤、Install vue-router? (Y/n);安装的路由?(/ N)。(可安可不安,以后也可以再安,根据需求选择)
⑥、Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ N)。(使用ESLint语法,就要做好心理准备,除非你非常懂ESLint语法,要不就会处处报错,我就被逼疯过,建议N)
⑦、Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(选N)
⑧、Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(选N)
此时会生成一个 projectName 的文件夹,这个文件夹就是vue的项目模板
npm
install
//
初始化安装依赖
npm run dev
//运行,
在浏览器打开http:
//localhost
:8080,则可以看到欢迎页了。
使用vscode开发vue项目相关推荐
- vscode开发vue项目页面修改保存时不自动编译的问题解决办法
需要注意router文件中引用名必须与文件目录中名称完全一致,区分大小写. 如果大小写不同的话,router依然能成功跳转,但是在文件修改保存时,vscode就不会实时编译了.
- vscode 开发vue必备插件_vsCode开发vue项目必备插件
VSCode 开发Vue必备插件 对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur 实现在 vue 文件中: 语法错误检 ...
- VsCode工具开发vue项目必装插件
VsCode工具开发vue项目必装插件 目录 VsCode工具开发vue项目必装插件 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Sn ...
- vsvue文件css提示插件,VSCode 开发Vue必备插件
VSCode 开发Vue必备插件 对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur 实现在 vue 文件中: 语法错误检 ...
- 使用vscode运行vue项目
!!学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目.!! 文章参考:https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0 ...
- linux npm安装_怎样在Linux上开发vue项目
怎样在Linux上开发vue项目 一.开发环境搭建:安装node.js环境以及vue cli工具 (1)安装node.js 从官网下载对应的二进制压缩包,如下图: 解压到程序安装目录 xz -d no ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- [vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗?
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
- VSCode搭建Vue项目及服务器部署
一.安装nodeJs 在我之前的博客<idea搭建vue-cli项目>里有详细安装教程,这里进入! 二.在VSCode搭建Vue项目 1.安装全局脚手架 npm i -g @vue/cli ...
最新文章
- The Long-Term Stability of Ecosystems
- 《数字城堡》大片制作
- AutoX江苏超级工厂首曝光!机械臂随处可见,车辆出厂就能完全无人驾驶
- 开源播放器 ijkplayer (一) :使用Ijkplayer播放直播视频
- 【站点部署】解析二级域名并部署站点
- Java--任务定时调度
- 【Arthas】Arthas thread查看线程信息
- C# 中XML序列化与反序列化学习笔记
- Spring依赖查找中的常见异常
- 云计算介绍-1.1,IaaS\PaaS\SaaS辨析
- python123.io简单编程题合集
- ServiceManager学习框图
- linux多线程编程书籍推荐:linux大牛之路从这几本书開始总结
- PS制作透明图片png格式
- 编写函数,对传送过来的三个数选出最大值和最小值,并通过形参传回调用函数
- RIP路由协议及工作原理
- 阿里云视觉AI训练营_Class3_文字识别项目讲解及使用说明
- 盘点三种卫星图分幅导出的方法
- Access update语句 提示 操作必须使用一个可更新的查询Access update语句 提示 操作必须使用一个可更新的查询
- IT人的学习方法论(全)
热门文章
- 银联无跳转支付流程(银联侧开通)
- 常见电脑硬件故障有哪些?如何解决?~~~显卡故障
- 关于Dlink和ADSL不和谐的解决
- 庆祝EDA夺冠之余,我们来讨论讨论程序员一般想要new一个什么样的对象
- csr867x入门笔记(序)
- Polar SC的C++实现
- Android微信通讯录界面代码,Android中使用Expandablelistview实现微信通讯录界面
- 舞蹈迁移:EverybodyDanceNow reproduced in pytorch
- CSS滤镜实现鼠标悬停图片变黑白(灰色)
- 2020手机音频解码芯片_2020杰理音频芯片全解析,14款音频产品代表作拆解汇总...