使用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 打开,查看结果👇:
或者使用VSCode插件(live server)创建一个临时本地服务器,右键 Open with Live Server,运行完后记得关闭,右键Stop Live Server
使用vue-cli快速构建Vue项目
全局安装vue-cli
打开cmd输入以下命令:
npm install -g vue-cli
安装webpack
webpack是打包js的工具
开始创建vue项目
首先创建一个文件夹用来存放你的项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是Web竞赛VueStudy
输入以下命令:
vue init webpack firstvue
firstvue是项目名称,按自己喜好即可
接着会出现一些配置项,可以根据需要配置,按照默认一路回车即可,然后继续等待安装依赖项。
一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到如下目录,其中main.js就是入口。
接着按照提示 To get stared
我们先cd到项目所在目录 即:
cd firstvue
然后输入以下指令后回车:
npm run dev
等待一小会儿会出现以下画面:
打开浏览器,输入http://localhost:8080
出现以下画面就是成功了
打包发布上线
输入命令:
npm run build
完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。