时间:2021-05-26
在vscode上搭建一个vue项目---初学总结。
1.假设Vscode、nodejs等已经安装好了。
2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。
安装命令:
npm install -g vue-cli打开VScode的终端,调出命令输入框。点击终端-新建终端,输入上述命令,回车,等待安装完成。
3.安装webpack,它是打包js的工具
安装命令:
npm install -g webpack安装方法同上。
4.安装完成之后就可以开始创建vue项目,首先创建一个文件夹用来存放你的项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是myvue
创建项目命令,输入回车:
vue init webpack myvue其中myvue就是项目名称,根据喜好自己取。
接着会出现一些配置项,可以根据需要配置,也可以默认,直接按回车。
然后继续等待安装依赖项。完成之后,一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到如下目录,其中main.js就是入口。
5.接着运行项目,先cd到项目文件夹,cd myvue,然后输入以下指令
npm run dev成功之后,接着在浏览器里输入:http://localhost:8080,看到如下画面就是成功了。
6.项目打包发布上线
输入命令:
npm run build完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。
到此这篇关于VSCode搭建Vue项目的方法的文章就介绍到这了,更多相关VSCode搭建Vue内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
之前我们使用VSCode搭建C#项目,今天写一篇关于django项目的搭建,其实以其说是搭建django框架,不如说是如何通过vscode开发django项目;
现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢?通常情况下,我们搭建
项目搭建时间:2020-06-29本章节:讲述基于vue/cli,项目的基础搭建。本主题讲述了:1、跨域配置2、axios请求封装3、eslint配置4、环境d
使用vue的同学们大都是基于vue-cli来搭建项目的,vue-cli中的配置全面强大。//常用的命令npmrundev//本地热更新模式npmrunbuild
用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构。今天小编我便来记录一下vue-cli脚手架的构建项目的经验。1、首先便是要搭建好vue-cl