Vue vscode 创建 vue 项目流程【超详细】

最新推荐文章于 2025-06-21 03:30:16 发布
最新推荐文章于 2025-06-21 03:30:16 发布
阅读量6.5w 收藏 607
点赞数 162
CC 4.0 BY-SA版权
分类专栏： Vue 全家桶 文章标签： vue项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45677671/article/details/115390358

文章目录

一、安装node

  1. 请在官网下载安装：https://nodejs.org/zh-cn/
  2. vscode 中 点击 ( ctrl + `) 调出终端
  3. 输入指令node -v，能显示版本号，说明 node 已经装好了
  4. 输入指令npm -v，能显示版本号，说明 npm 可以使用了

点击链接查看图文教程
https://blog.youkuaiyun.com/qq_45677671/article/details/114535955

二、配置淘宝镜像

  • 输入指令：
  • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 输入指令cnpm -v，能显示版本号，说明 cnpm 已经装好了

三、配置 vscode（win10）

win7 无需配置

  1. 右击VSCode图标，选择属性，选择兼容性，勾选以管理员身份运行此程序，最后点击确定
    在这里插入图片描述
  2. vscode 中 点击 ctrl + ` 调出终端
  3. 输入命令：get-ExecutionPolicy
  4. 输入命令：set-ExecutionPolicy RemoteSigned
  5. 输入命令：get-ExecutionPolicy
  • Restricted：表示禁止终端使用命令的
  • RemoteSigned：表示可以使用终端命令了
    在这里插入图片描述

四、全局安装脚手架

  • 在终端输入命令：cnpm i -g @vue/cli 或npm i -g @vue/cli

五、创建项目

  • 先创建一个放置项目的文件夹www
  • 在终端中使用cd指令跳转到这个文件夹
  • 创建项目指令：vue create ds-shop（ds-shop是项目名，可以自己取）

配置项目流程：

  • 上下箭头键：表示选择
  • 回车键：表示确认

1. 选择Manually select features，表示手动配置
在这里插入图片描述

2. 选择需要安装的插件，一般选如下勾选项（按空格键选择）
在这里插入图片描述

  • Choose Vue version：选择Vue版本
  • Babel：解析 es6 转 es5 的插件
  • TypeScript：TypeScript插件
  • Progressive Web App (PWA) Support：渐进式Web应用程序（PWA）支持
  • Router：vue路由插件
  • Vuex：Vuex插件
  • CSS Pre-processors：css预处理插件
  • Linter/Formatter：格式化程序
  • Unit Testing：单元测试
  • E2E Testing：端到端（end-to-end）

3. 选择 vue 版本

在这里插入图片描述

4. 选择路由模式 是否为 history模式，y表示是，N表示使用hash模式，这里选择的是N

在这里插入图片描述

  • history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持）
  • hash： 浏览器url址栏 中的 # 符号（如这个 URL：http://www.abcd.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面。更容易进行打包上传服务器

5. 选择使用那种css预处理器，这里选择的是 第二种 scss with node-sass

在这里插入图片描述

6. 选择编码规则，建议初学者选择第一项，表示只有报错时才会验证

在这里插入图片描述

1. ESLint with error prevention only
只配置使用 ESLint 官网的推荐规则

2. ESLint + Airbnb config
官网推荐的规则 + Airbnb 第三方的配置

3. ESLint + Standard config
使用 ESLint 官网推荐的规则 + Standard
第三方的配置

4. ESLint + Prettier
使用 ESLint 官网推荐的规则 + Prettier 第三方的配置

7. 何时检测？这里选的是每次保存时验证Lint on save
在这里插入图片描述

  • Lint on save： 保存就检测

  • Lint and fix on commit：fix和commit时候检查

8. 如何存放配置 ？这里使用 package.json
在这里插入图片描述

  • In dedicated config files ：独立文件放置
  • In package.json：放package.json里

9. 是否保存本次配置（之后可以直接使用），这里选的是保存y
在这里插入图片描述

10.保持本次配置的信息并命名（随便取），下次就可以直接使用本次配置，无需从新手动配置
在这里插入图片描述
11. 配置完成
在这里插入图片描述

六、进入项目

  • 指令：cd ds-shop（进入项目文件夹）
  • 指令：npm run serve（启动项目 ）
  • 执行完之后 ，显示 Compiled successfully in ***，表示运行成功
    在这里插入图片描述
    App running at:
    • Local: http://localhost:8080/
    • Network: http://10.36.136.251:8080/
  • 打开浏览器，输入Local地址（http://localhost:8080/）
  • 就能访问你刚创建的项目了
    在这里插入图片描述

七、项目结构

在这里插入图片描述

  • node_modules 所有依赖项
  • public 静态内容
    • favicon.ico 小图标
    • index.html
  • src 项目执行的主目录
    • assets 静态文件
      • 图片 、
      • json、
      • iconfont、
    • components 组件
    • router 路由配置文件
    • views 放置页面内容
    • App.vue 项目的根组件，文件中可以写路由出口和路由链接 ，在 main.js里引入
    • main.js 项目的主入口文件
  • .gitignore git的忽略文件
  • babel.config.js 设置 babel 的配置的
  • package.json 所有依赖包配置文件
  • README.md 项目文档
VUE项目目录与运行流程（VScode）
m0_64498202的博客
01-22 891
一个页面可以拆分成一个个组件，每个组件有着自己独立的结构，样式，行为。好处：便于维护，利于复用->提升开发效率。组件分类：普通组件，根组件。
VSCode创建Vue项目完整教程
热门推荐
weixin_46271689的博客
04-18 4万+
文章目录一、配置环境1.安装VS Code2.安装node.js3.安装配置脚手架vue-cli二、创建vue项目1.命令方式创建2.重新初始化依赖3.启动项目总结 一、配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code，按照步骤安装。 2.安装node.js （1）官网 https://nodejs.org/en/ 下载node.js，按照步骤安装即可，node.js安装完成之后会同步安装npm。 （2）配置环境变量：把node.j
VSCode新建VUE项目
zh653的博客
04-23 784
打开系统环境变量设置，在 ‌Path‌ 中添加 C:\Users\zhao.zhao\node_global。在 VSCode 终端中重新执行 vue create my-vue-project。在VSCode中按 Ctrl+Shift+P 打开命令面板，选择「新建终端」。按提示选择配置（如Babel、Router、Vuex等），默认配置可一路回车。右键点击 VSCode 快捷方式，选择 ‌以管理员身份运行‌。一、打开VSCODE，使用Vue CLI创建（推荐）修改 npm 全局缓存路径（推荐）‌。
新手小白如何用vscode写个vue项目
banquet79的博客
07-14 2012
创建项目这一块的教程很多，百度一下可多了，重要的是理解创建下来的项目构造，以及我们的代码应该写在哪里 创建完项目第一步是去看package.json文件，配置文件的script很重要 其中build是用来打包项目的，lint是用来整洁代码的，serve是用来启动项目的如npm run serve 之后看src里面的文件，这是我们编辑代码的地方，asset文件里面用来放一些图片或者音频等资源 还有其他涉及的重要文件有： main.js： ​ ​ import Vue from 'vue' i
创建Vue项目
最新发布
ITKidKid的博客
06-21 632
使用vite创建vue项目
VSCode创建VUE前端项目
weixin_44740485的博客
06-13 2493
1、下载并安装node.js2、配置npm​ a、设置淘宝镜像 ​ b、安装全局脚手架 二、创建项目 1、创建一个工作空间（就是找个地方创建一个空目录）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ni1Ync7X-1655126454075)(C:\Users\Katrina’s hb\AppData\Roaming\Typora\typora-user-images\image-20220613205909472.png)]2、打开vscode,打开这个文件夹[外链图片转
使用vs code搭建vue项目1
09-04
首次使用vs code来搭建的vue项目，欢迎大家来查看指正。
vscode创建vue项目
小白_L的博客
10-09 1万+
一、前情提要只适用于已安装node、修改过淘宝镜像等前期准备工作，直接开始进行项目创建。二、创建新项目1、先创建一个文件夹，也可以通过VSCode打开已有文件夹。（此文件夹为新创建项目的上级文件夹）2、选中打开的文件夹，点击右上角打开终端，也可以通过查看打开终端3、切换Command Prompt4、输入npm create vite@latest，再输入项目名称->回车->选中vue，不知道怎么选就一直回车完成接下去的选项(
使用VSCode快速创建一个Vue项目
weixin_59230783的博客
03-28 4553
简简单单使用VSCode创建一个Vue项目
Vscode创建vue项目教程
very__good_的博客
12-07 1516
vscode创建vue项目教程
VSCode搭建Vue Element Admin的项目环境
04-11
### VSCode搭建Vue Element Admin的项目环境 #### 版本说明 - **Node**: v18.20.2 - **NPM**: 10.5.0 - **Git**: 2.19.1 - **Vue Element Admin**: [官网链接]...
VScode新建vue项目流程
范范的博客
05-13 566
创建一个新的vue项目 前期准备： 一、WIN10、VScode平台，下载不停下一步安装node.js（之后可以使用npm命令）; 二、安装脚手架npm-cli; npm install vue-cli -g 三、webpack init创建新项目 vue init webpack vue-demo 四、安装路由router： 1.在npm install vue-router之后会生成一个与项目层级并列的node_moudle文件夹，内有router的初始配置。 2.在sr
一文教你学会vue前端项目创建与开发
任聪聪的博客
09-07 1679
说明：自定义的项目结构对于我们后期的开发工作有着至关的作用，一个好的目录结构及配置能够在后续的工作中起到事半功倍的效果。timeout: 5000,//超时时间headers: {},});// 请求拦截器});},error => {// 响应拦截器},error => {},npm run dev 运行开发环境npm run b:prod 构建生产环境的代码。npm run b:stage 构建阶段环境的代码。
VSCode创建Vue项目
qq_44664361的博客
03-11 1317
同样也是在vscode终端，输入vue init webpack ZJJJi，意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的，ZJJJi 是整个项目文件夹的名称，大家可自行更改。(2) 根据提示，访问http://localhost:8080，会访问到如下界面。（3）查看node.js是否安装成功：打开cmd，输入ndoe -v 和 npm -v 如果显示版本信息，则说明安装成功。下载node.js，按照步骤安装即可，node.js安装完成之后会同步安装npm。
在vscode中创建vue项目
someday____的博客
09-01 2万+
昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目，今天目标是自己用vscode新建一个vue项目。第三步：在下面步骤中，一些需要填写或选择的选项，我都直接Enter了，一些需要安装的我都直接No了。第一步：打开vscode, 选择 文件 >> 打开文件夹 选择要创建项目的文件目录。第五步：在浏览器输入http://localhost:8080就可以打开项目了。，其中projectName可以自行修改。第四步：按照上图提示进入到项目目录并运行项目。...
使用VSCode创建一个Vue项目
Ethereal的博客
07-12 6508
详细介绍如何创建一个Vue项目，node.js，vue-cli安装，配置淘宝镜像等。
使用VScode创建Vue项目
weixin_56109504的博客
11-02 1638
使用vscode创建vue项目
使用vscode创建vue2.0项目
04-29
### 创建 Vue 2.0 项目并在 VSCode 中配置 #### 安装 Vue CLI 并初始化项目 要创建一个基于 Vue 2.0 的项目，可以使用 Vue CLI 工具。通过命令行工具安装 Vue CLI 后，运行以下命令来初始化一个新的 Vue 项目： ```bash npm install -g @vue/cli vue create my-vue-project --default ``` 此命令会默认创建一个 Vue 2.x 版本的项目[^1]。 #### 使用 VSCode 打开项目 完成项目初始化后，在终端中进入新创建的项目目录，并使用 `code .` 命令在 Visual Studio Code (VSCode) 中打开该项目： ```bash cd my-vue-project code . ``` #### 查看和修改 `package.json` 在 VSCode 中打开项目后，可以通过导航至 `package.json` 文件查看项目的脚本配置项。通常情况下，该文件包含以下常用脚本条目： - **启动开发服务器**: ```json "scripts": { "serve": "vue-cli-service serve" } ``` 执行以下命令可启动本地开发环境： ```bash npm run serve ``` 这将在浏览器中访问地址 `http://localhost:8080` 来预览应用。 #### 设置调试功能 为了更方便地调试 Vue 2.0 项目，可以在 VSCode 中设置断点并通过 Chrome 浏览器进行实时调试。具体操作如下： 1. 在 `.vscode/launch.json` 文件中定义调试配置。如果当前项目未自动生成该文件，则手动创建它并填写以下内容： ```json { "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" } ] } ``` 2. 进一步优化调试体验：前往 VSCode 的 Settings 面板，搜索关键字 `debug breakpoints everywhere`，勾选选项 `Debug: Allow Breakpoints Everywhere`，从而允许在整个代码库范围内启用断点支持[^3]。 #### 添加路由模块 对于需要实现页面跳转的应用场景，推荐集成 Vue Router 插件。按照标准流程编写路由逻辑，例如编辑 `src/router/index.js` 文件的内容如下所示： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; // 注册插件 Vue.use(VueRouter); // 导入组件 const Login = () => import('@/pages/Login.vue'); const Home = () => import('@/pages/Home.vue'); export default new VueRouter({ mode: 'history', routes: [ { path: '/login', component: Login }, { path: '/home', component: Home }, { path: '*', redirect: '/login' } // 默认重定向到登录页 ], }); ``` 最后记得将路由器实例挂载到主入口文件 `main.js` 上面去[^2]: ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; // 引用路由表 new Vue({ el: '#app', render: h => h(App), router, }).$mount('#app'); ``` --- ###
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值