阅读 126

使用Visual Studio Code搭建第一个Vue项目

使用Visual Studio Code搭建第一个Vue项目

使用Visual Studio Code搭建第一个Vue项目

前置准备

  • 已安装Visual Studio Code

  • 已安装Node.js

推荐在VSCode上安装的前端插件

  • 驼峰翻译助手:中文一键翻译转换成常用大小驼峰等格式 "Alt+shift+t"

  • Auto Close Tag:自动闭合HTML/XML标签

  • Auto Rename Tag:自动完成另一侧标签的同步修改

  • HTML CSS Support:智能提示CSS类名以及id

  • open in browser:这个不用多说了

  • Path Intellisense:自动提示文件路径,支持各种快速引入文件

  • Vetur:Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。

  • live server 插件:开启本地服务器

使用VSCode编写第一个Vue

在随意一个地方新建文件夹作为VSCode的工作区,然后新建一个.html文件编写以下代码:????

ExampleCode


<!--

* @FilePath: \Web竞赛VueStudy\firstVue.html

* @Author: Liu Xingyu

* @Date: 2021-04-19

* @Version: 1.0

* @Contact: 18423475135@163.com

* @Descripttion注释/说明:  firstVue.js

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>First Vue Example</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

<p>{{ message }}</p>

</div>

<div id="app2">

<p>{{ message }}</p>

</div>



<script>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

new Vue({

el:'#app2',

data:{

message:'Create by Jaolvv'

}

})

</script>

</body>

</html>

右键(Open In Default Browser) 或 Alt + B 打开,查看结果????:

img

或者使用VSCode插件(live server)创建一个临时本地服务器,右键 Open with Live Server,运行完后记得关闭,右键Stop Live Server

使用vue-cli快速构建Vue项目

全局安装vue-cli

打开cmd输入以下命令:

npm install -g vue-cli

img

安装webpack

webpack是打包js的工具

img

开始创建vue项目

首先创建一个文件夹用来存放你的项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是Web竞赛VueStudy

输入以下命令:

vue init webpack firstvue

firstvue是项目名称,按自己喜好即可

接着会出现一些配置项,可以根据需要配置,按照默认一路回车即可,然后继续等待安装依赖项。

img

一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到如下目录,其中main.js就是入口。

img

接着按照提示 To get stared

我们先cd到项目所在目录 即:

cd firstvue

然后输入以下指令后回车:

npm run dev

等待一小会儿会出现以下画面:

img

打开浏览器,输入http://localhost:8080

出现以下画面就是成功了

img

打包发布上线

输入命令:

npm run build

完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。

参考链接:https://www.cnblogs.com/zyskr/p/10609288.html

本文作者:焦虑烧麦

本文链接:https://www.cnblogs.com/jaolvv/p/14676203.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐