使用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文件夹，里面就是打包之后的内容，直接部署就好了。
