前端开发部署:Visual Studio Code + vue

〇 说明

本教程全部采用默认安装路径,因为在进行自定义路径安装的时候,需要配置各种环境变量,在这个配置过程中,可能出现各种很混乱的问题。

一 安装Node.js

1 下载https://nodejs.org/en

2 按照默认NEXT执行



==C:\Program Files\nodejs==


这里不勾选,后续需要什么tools的时候,再进行安装即可。



3 安装完成后校验

Win + R 打开 CMD

输入版本查看命令,查看安装是否成功

bash 复制代码
node -v
npm -v

二 安装vue

1 首先定义镜像路径

bash 复制代码
npm config set registry https://registry.npmmirror.com

2 输入下面指令查看路径

bash 复制代码
npm config get

3 安装vue相关工具

3.1 安装webpack

webpack用来项目构建、打包、资源整合等。

bash 复制代码
npm install webpack -g

3.2 安装vue-cli脚手架构建工具

注意这里安装新的脚手架。

bash 复制代码
npm install -g  @vue/cli

出现warn没关系,继续执行即可。

查看vue版本及是否成功:

bash 复制代码
vue -V

三 上述命令集

bash 复制代码
node -v
npm -v
npm config set registry https://registry.npmmirror.com
npm config get

npm install webpack -g
npm install -g  @vue/cli
vue -V

四 基于上述vue创建项目

1 新建一个存放项目的路径,如在D盘新建web-system文件夹,然后将路径设置到该文件夹。

2 新建项目 vue create vue-demo,这里选择第三个Manually select features自定义选项操作并回车(至于第一个和第二个选项可以快速搭建带eslint和babel的项目)。

bash 复制代码
vue create vue-demo


3 选择配置项,这里选择了Babel、Router、Vuex、Linter/Formatter三个选项,然后回车。

(4)选择vue版本,这里选择vue2,然后回车。

(5)选择router的模式

vue-router分为两种模式hash、history;

这里选择history模式,所以输入Y,然后回车(如果使用hash,则输入n)。

(6)代码语法错误检查,这里选择ESLint + Standard config,这个是标准的,然后回车。

(7)选择检查代码语法的时机,这里选择第一个Lint on save(保存时检查),然后回车。

(8)第三方配置文件存在的方式,这里选择第一个In dedicated config files,然后回车。

(9)是否保存本次配置为预设项目模板,这里选择N(也可以选择Y,这样下次可以直接使用该配置方案快速搭建项目),然后回车,等待项目搭建成功。

(10)项目搭建完成。

(11)按照提示,运行项目:

bash 复制代码
cd vue-demo
npm run serve

(12)在地址栏输入http://10.93.226.107:8080/或者http://localhost:8080/,可以直接打开VUE起始页。

bash 复制代码
  - Local:   http://localhost:8080/
  - Network: http://10.93.226.107:8080/

五 安装VS Code

1 下载https://code.visualstudio.com/

2 安装VS Code






3打开已新建的项目

(1)"文件"---"打开文件夹"---找到D:\web-system\vue-demo,直接选择该文件夹,项目同时包含在其中。

信任项目

(2)在VScode终端运行项目。

  • ① 打开终端

  • ② 输入:npm run serve

  • ③如果不行的话,记得用系统管理员权限操作。

    (3)在地址栏输入http://10.93.226.107:8081/或者Ctrl+单击地址,可以直接打开VUE起始页。

4 结束运行项目

在控制台界面,按Ctrl+C

相关推荐
辰风沐阳28 分钟前
JavaScript 的宏任务和微任务
javascript
跳动的梦想家h1 小时前
环境配置 + AI 提效双管齐下
java·vue.js·spring
冰暮流星1 小时前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_2 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
一 乐2 小时前
校园二手交易|基于springboot + vue校园二手交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
科技D人生3 小时前
Vue.js 学习总结(20)—— Vue-Office 实战:word、pdf、excel、ppt 多种文档的在线预览
vue.js·word·vue-pdf·stylesheet·docx-preview·vue-office
vx1_Biye_Design3 小时前
基于Spring Boot+Vue的学生管理系统设计与实现-计算机毕业设计源码46223
java·vue.js·spring boot·spring·eclipse·tomcat·maven
vx_Biye_Design3 小时前
基于Spring Boot+vue的湖北旅游景点门票预约平台的设计--毕设附源码29593
java·vue.js·spring boot·spring cloud·servlet·eclipse·课程设计
hedley(●'◡'●)3 小时前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
qq5_8115175153 小时前
web城乡居民基本医疗信息管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot