Vue的vscode环境配置及插件推荐

环境配置

1.去官网下载安装Node.js，根据自己的电脑型号选择合适的版本下载，选择LTS模式下的。然后下载完成后无脑下一步就行，安装过程会自动配置好环境变量。安装完成后可以打开命令端口输入node -v和npm -v分别查看安装的node和npm（包管理器，类似pip，node自带）的版本，出现版本号代表安装成功。
2.安装cnpm（除了下载地址和npm不一样其余都一样的，可以互相代替），npm安装插件是从国外服务器下载，使用淘宝的来下载插件。输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org，完成后输入cnpm -v可查看到相关版本信息。
3.安装webpack（js应用程序的静态模块打包器）
因为Vue组件是.vue或.wxml等文件，无法被浏览器解析，需要被翻译和打包成为.js文件，而webpack就可以实现该功能。输入cnpm install webpack -g安装。
4.安装vue-cli（用来生成vue模板的工具，但是初学vue不要直接上手vue-cli） vue-cli这个构建工具可以降低webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器（意思就是运行的页面可以向后端发放指令）。vue-cli就是一个脚手架，就是用配置好的模板快速搭起一个项目来，省去配置webpack的基本内容。通过vue init 模板名和项目名，然后几个设置就能搭建起来一个项目。
输入cnpm install vue-cli -g 安装。
5.环境已经差不多配置完成，新建一个项目来检验一下。重新代开命令行界面。

首先，新建一个VueProject文件夹来专门储存vue项目
在命令行进入该文件夹下，用 cd 指令进入
输入vue init webpack text1新建一个名为text1的项目
然后会回车或者输入y/n来操作一下，最后一步注意选择第三个选项（为了使用cnpm下载，快速），如下图所示

完成创建后目标目录下就会显示刚刚创建好的文件夹，如下图

然后在命令行中cd text1目录下，输入cnpm install下载安装项目的依赖，完成后就会发现text1目录下多出来一个node_modules文件夹，专门用来储存项目依赖的，如下图所示

输入cnpm run dev命令（用npm run dev是一样的）后会给出提示让我们在浏览器通过http://localhost:8080（通过本地服务器端口8080来访问运行的项目结果），最后打开的页面如下图

vscode相关插件和环境配置

首先安装两个很重要的插件，

vetur，vue语法的插件
eslint，智能错误检测以及格式化
配置VueProject文件夹下vue编写环境的设置文件，settings.json

{"editor.detectIndentation": false,"editor.tabSize": 2,"prettier.tabWidth": 2,"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验"prettier.semi": false, //去掉代码结尾的分号"prettier.singleQuote": true, //使用带引号替代双引号"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
}

课设总结

课设做的是基于web的收藏夹管理系统（前后端分离，vue来书写前端，python语言来书写后端，最后运行在服务器上），分为以下几步来实现。

首先mysql安装，navicat来搭建数据库以及学习基本的sql语句
编写flask框架的后端代码，使用postman来进行调试检验效果。
其次利用vue.js来编写后端实现前后端连接，最后将前端工程打包
构建云服务器，可以购买阿里云服务器（新用户可以免费试用），使用宝塔在云服务器上搭建python运行环境，数据库，以及网站。特别注意设置宝塔和阿里云实例里面端口权限的开放，开启端口，且面向所有人开放
推荐学习资料：
第一项学习视频
第二项学习视频
第三项学习视频
第四项学习视频：先基础学习学习完成前四个课时，然后在看后续操作

前后端分离的web项目开发总结（完整课设的创作过程）相关推荐

分享一个前后端分离的web项目（vue+spring boot）
Github地址:https://github.com/smallsnail-wh 前端项目名为wh-web 后端项目名为wh-server 项目展示地址为我的github pages(https:/ ...
SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包第二步:然后去写配置文件: 第 ...
java前后端分离的实现方式_采用前后端分离的方式进行开发，实现了几种常用的文件上传功能...
MyUploader-Backend 单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传简介采用前后端分离的方式进行开发,实现了几种常用的文件上传功能. 前端采用 vue.js + ...
一款小清新的 SpringBoot+ Mybatis 前后端分离后台管理系统项目
今日推荐推荐3个快速开发平台前后端都有项目经验又有着落了推荐一个高仿微信的项目有点屌!!一二线城市知名 IT 互联网公司名单(新版) 项目介绍前后端分离架构,分离开发,分离部署,前后端互不影 ...
springboot jwt token前后端分离_基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目...
一.前言最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们功能很简单,单点登录,前后端动态权限配 ...
前后端分离的webgis项目(二)
前后端分离的webgis项目(二) 二. 前端vue+leaflet 首先你得安装nodejs并配置环境,看这里,然后安装vue-cli,用它来快速新建项目可以使用下列任一命令安装 npm inst ...
使用SpringBoot + Vue (若依前后端分离版) 写项目的一些总结(持续更新...)
使用SpringBoot + Vue(若依前后端分离版) 写项目的一些总结获取Redis服务 @Autowired private RedisCache redisCache; String cap ...
基于SpringBoot+Vue开发的前后端分离博客项目-Java后端接口开发
文章目录 1. 前言 2. 新建Springboot项目 3. 整合mybatis plus 第一步:导依赖第二步:写配置文件第三步:mapper扫描+分页插件第四步:代码生成配置第五步:执行 ...
超详细！4小时开发一个SpringBoot+vue前后端分离博客项目！！
小Hub领读: 前后端分离的博客项目终于出来啦,真是花了好多心思录制咧.文末直接进入B站看视频哈! 作者:吕一明项目代码:https://github.com/MarkerHub/vueblog 项 ...

前后端分离的web项目开发总结（完整课设的创作过程）

web项目开发总结

Vue的vscode环境配置及插件推荐

环境配置

vscode相关插件和环境配置

课设总结

前后端分离的web项目开发总结（完整课设的创作过程）相关推荐

最新文章

热门文章