一、安装 Vue
1、下载并安装 node.js
官方地址:https://nodejs.org/en/download/
Windows PowerShell(管理员),执行 node -v
和 npm -v
,有版本信息,表示安装成功
注:npm 的作用就是对 node.js 依赖的包进行管理
2、安装淘宝镜像(cnpm)
npm 包安装地址是国外服务器,如果出现下载慢或者出现异常,若解决此问题,就需要使用 cnpm 指令替代 npm,cnpm 是淘宝团队做的 npm 的镜像,目前 10 分钟更新一次,执行:npm install cnpm -g --registry=https://registry.npm.taobao.org
执行 cnpm -v
显示如下信息,表示安装成功:
3、安装全局 vue
执行:cnpm install -g vue
,如下,安装成功:
4、安装 vue-cli(脚手架:前端框架)
最新版,执行 cnpm install @vue/cli -g
非最新版,执行cnpm install vue-cli -g
可能会出现(使用 cmd 不会出现):
执行set-ExecutionPolicy RemoteSigned
,并输入 Y 或 A,回车,之后,再次执行安装 vue-cli 即可!
出现安装进度,等待片刻,安装完成,查看版本,表示安装成功:
二、创建 vue 项目
1、cd 到指定文件夹,并创建项目,项目名不能使用大写字符,报错:
2、首次提示是否使用淘宝镜像,输入 Y,回车,输出:
3、选择一个,回车,此处我选择了 Vue 3,回车,等待创建完成:
4、cd 到项目目录下 cd myfirstvuedemo
,执行 npm run serve
(若 node.js 提示防火墙,允许),编译、启动网站服务:
5、浏览器访问,成功:
接下来,就可以使用 IDE 开发你的网站了!
三、打造更人性化的 VsCode
VsCode 安装完成后,需要‘调教’一番后,才可以让你前端的开发更加舒适,不止 vue!
3.1、安装必备插件
-
Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F(格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个 Ctrl 需要同时按着) -
EsLint —— 语法纠错
-
Auto Close Tag —— 自动闭合HTML/XML标签
-
Auto Rename Tag —— 自动完成另一侧标签的同步修改
-
JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除 js 外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
-
Path Intellisense —— 自动路径补全,输入路径时,提供下了下级目录列表选择
-
TML CSS Support —— 让 html 标签上写 class 时,智能提示当前项目所支持的样式
-
Beautify —— 格式化代码(与 Vetur 格式化类似,可以不装此插件),值得注意的是,beautify 插件支持自定义格式化代码规则
-
Bracket Pair Colorizer —— 给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
-
open in browser —— 直接右键项目单击启动
-
Live Server —— 这个插件在开发单网页时很有用,安装之后可以打开一个简单的服务器。而且还会自动更新。安装之后,打开项目文件夹,再在文件上点击右键就会出现一个 Open with Live Server 的选项,就会自动打开浏览器了,默认端口号是 5500
-
GitLens —— Git Supercharged 必备,查看 git 文件提交历史
-
Document This —— 注释文档生成
-
One Monokai Theme —— 能够选择自己喜欢的颜色主题,来编写代码,比较喜欢用的是暗黑风格的 monokai
-
vscode-icons —— 很好用,能够选择自己喜欢的图标主题,比较推荐 vscode icons
-
EditorConfig for Visual Studio Code —— 一种被各种编辑器广泛支持的配置,使用此配置有助于项目在整个团队中保持一致的代码风格。
3.2、插件自定义配置
3.2.1、优化 Vetur 的全文格式化,使 html 标签不换行
1、点击 Vetur 右侧的 “在 setting.json 中编辑”
2、贴入以下脚本,Ctrl+S 保存即可
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto", //属性折行对齐方式
"end_with_newline": false
}
}
3.2.2、修改中文字体
不想用宋体,想使用微软雅黑,如下图(Consolas, 微软雅黑, monospace
):
3.2.3、如同输入“!”,再按“tab”自动创建 html 模板一样,自动创建 vue 模板
{
// Example:
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"vue\">$0</div>",
"</template>",
"",
"<script>",
"export default {",
" components: {},",
" steup() {",
" return {",
" };",
" },",
" props: {},",
" data() {",
" return {",
" };",
" },",
" watch: {},",
" computed: {},",
" methods: {},",
" created() {},",
" mounted() {}",
"};",
"</script>",
"<style scoped>",
"#app{}",
"</style>"
],
"description": "A vue file template"
}
}
四、打开项目文件夹,开启开发之旅
have fun~