前端开发部署: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

相关推荐
冬夜戏雪13 分钟前
实习面经记录(十)
java·前端·javascript
爱学习的程序媛2 小时前
【Web前端】JavaScript设计模式全解析
前端·javascript·设计模式·web
薛先生_0992 小时前
js学习语法第一天
开发语言·javascript·学习
苦瓜小生2 小时前
【前端】|【js手撕】经典高频面试题:手写实现function.call、apply、bind
java·前端·javascript
踩着两条虫3 小时前
AI驱动的Vue3应用开发平台深入探究(十):物料系统之内置组件库
android·前端·vue.js·人工智能·低代码·系统架构·rxjava
FateRing3 小时前
vscode插件fail to fecth
ide·vscode·编辑器
和沐阳学逆向3 小时前
我现在怎么用 CC Switch 管中转站,顺手拿 Codex 举个例子
开发语言·javascript·ecmascript
慧一居士3 小时前
nuxt3 项目和nuxt4 项目区别和对比
前端·vue.js
kgduu5 小时前
js之客户端存储
javascript·数据库·oracle
四千岁5 小时前
2026 最新版:WSL + Ubuntu 全栈开发环境,一篇搞定!
javascript·node.js