前端项目初始化步骤（VUE）

最新推荐文章于 2024-04-06 00:05:22 发布
最新推荐文章于 2024-04-06 00:05:22 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： vue 搭建项目 文章标签： vue git
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40636998/article/details/105667298
版权

A.安装vue脚手架

1.先安装node
node -v，如果出现相应的版本号，则说明安装成功。

2.安装vue（如果cmd窗口很慢或者没反应请跳到第三步，如果成功直接B步骤）

npm install -g @vue/cli
# OR
yarn global add @vue/cli

3.安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

4.还是不行就安装cnpm,然后运行以下命令

cnpm install -g @vue/cli

B.通过脚手架创建项目 C.配置路由

vue create my-project
# OR
vue ui

vue ui可视化界面创建项目

20200421171701018

点击创建
20200421172715292

20200421172846131
在这里插入图片描述
20200421173523148
在这里插入图片描述
20200421174158659

在这里插入图片描述

D.配置Element-UI:在插件中安装，搜索vue-cli-plugin-element

在这里插入图片描述
在这里插入图片描述

E.配置Axios：在依赖中安装,搜索axios(运行依赖)

在这里插入图片描述
在这里插入图片描述

F.初始化git远程仓库

G.将本地项目托管到github或码云中

20200421201123766
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

刷新页面，成功提交

在这里插入图片描述

莫逸雪
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue项目初始化
lingbolixx的博客
03-05 2003
项目初始化步骤： 一、vue ui 创建项目 二、安装依赖 / 插件 三、上传本地项目到Gitee/Github 一、vue ui 创建项目 1. iTerm打开vue GUI vue ui （2）功能选择：Babel（方便使用es6/es7语法）、Router（路由）、Linter/Formatter（用ESlint、Prettier 检查代码格式） （3）配置： ·默认不选 history router ·pick a lint...
VUE前端项目初始化
小hu同学
03-13 484
一、前端项目的初始化步骤 1.安装Vue脚手架（以vue-3为例） 2.通过Vue脚手架创建项目 3.配置Vue路由 4.配置Element-UI组件库 5.配置axios库 6.初始化git远程仓库 7.将本地项目托管到云仓库（码云为例） 二、安装vue-3 通过下面的命令可以安装，使用npm安装，需要提前下载 安装Node.js Node 版本要求 Vue CLI 需要 Node.js 8.9...
前端技术-环境的搭建与初始化
最新发布
彪哥.TOP的博客
04-06 658
（下载ZIP压缩包，解压到你常用安装软件的目录，双击“HBuilderX.exe”打开软件）右击“毕业设计”文件夹，新建html文件，取名为index.html（首页文件）右击“CSS”文件夹，新建CSS文件，取名为style.css（样式文件）推荐使用Chrome（谷歌浏览器）、Edge（Win10、11自带浏览器）右击“JS”文件夹，新建JS文件，取名为main.js（样式文件）现在就可以编写，上一次留下任务#（可以复制粘贴）HBuilder 推荐（教程指定）普通项目，名字自定义，目录自定义#
谷粒学院-第四天-前端项目初始化
m0_56054652的博客
09-08 493
一、element-ui： element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建 官网： http://element-cn.eleme.io/#/zh-CN 二、Node.js 一、介绍 1、什么是Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度 非常快，性能非常好。 2
前端工程化初始化配置
sasha
05-25 203
1.安装nodejs后请配置好npm全局目录(推荐安装nvm，方便随时切换node版本) 参考：https://www.baidu.com/link?url=QR1-4WXPDcLmrLxBMy5uiljYdmkNft2DFJXuI2x3bDza2eTk5nXSe-HaFS5fRJDHEjQemAGWqmhKRPVwJtLi_K&wd=&eqid=9ade909500004714000000065e7036e5 npm config set prefix <全局模块安装路径> n
基于vue-cli初始化一个VUE项目
hss19214的博客
05-31 478
创建一个VUE项目： 环境准备： 操作系统：win10 已安装nodeJS，npm，cnpm 如果未完成上述安装请参考以下链接： NodeJS | npm | cnpm 安装教程 1.安装vue-cli vue脚手架： 2.输入vue init webpack my_test_vue 初始化项目： 初始化项目时的提示说明: Vue build：打包方式，回车即可； Install vue-router ：是否要安装路由，输入y 回车； Use ESLin...
移动端app项目代码初始化
08-02
在移动端App开发中，项目代码初始化是至关重要的第一步，它为整个应用的构建、测试和部署奠定了基础。...理解并熟练掌握这些初始化步骤和Vue 3的核心概念，将有助于提升移动端App的开发效率和质量。
vue wps插件引入到前端项目js
06-30
在`src/components`目录下创建一个新的Vue文件，例如`WpsEditor.vue`，并在其中编写组件代码以初始化和操作WPS插件。 6. **集成到Vue应用**：在需要使用WPS插件的Vue路由组件中，引入并使用刚刚创建的`WpsEditor`...
Vue源码分析之Vue实例初始化详解
10-16
除了以上介绍的阶段，还有其他几个重要的初始化步骤： 1. `initProps`：处理`props`选项，确保传入的props被正确地定义和赋值。 2. `initData`：初始化组件的数据对象，并将其转换为响应式。 3. `initMethods`：将`...
vue数据初始化initState的实例详解
10-17
在 Vue 实例化过程中，初始化数据是非常关键的步骤，这其中包括了 `initState` 函数。`initState` 主要负责对 Vue 实例的 `props`、`methods`、`data`、`computed` 和 `watch` 进行初始化，确保它们能够正常工作并...
Vite+vue3+ts 项目初始化底座
02-21
总的来说，"Vite+vue3+ts 项目初始化底座"是一个现代前端开发的良好起点，它结合了Vite的快速开发、Vue 3的先进特性以及TypeScript的类型安全性，为开发者提供了高效、稳定且易于维护的项目基础。
前端初始化
09-20
前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化前端初始化
前端项目初始化
CSDN_go_die的博客
03-14 1107
因为只学过vue，所以就用vue-cli的UI可视化界面进行初始化 1.随便打开win+R 打开cmd 2.输入vue ui命令打开面板
【Vue】vue项目如何初始化
Owen的博客
10-25 628
一、引入reset.css 为了让页面在不同终端的表现一致，首先我们需要引入reset.css，所有文件的引入都在入口文件main.js import Vue from 'vue' import App from './App' import router from './router' import './assets/style/reset.css' //文件路径 二、 ...
vue项目初始化详细步骤
a5421901的专栏
01-17 1992
第一步 安装node.js,下载链接 https://nodejs.org/en/download/ 第二步 安装vue-cli手脚架  在cmd下执行命令cnpm install vue-cli -g 第三步  进入需要新建项目的目录 cd d:/test 第四步  执行命令  vue init webpack demo(注：demo是项目名称) 第五步 显示Project nanme ...
如何初始化一个vue项目
qq_1149513559的博客
05-12 1224
1.先安装node（略） 2.npm 设置成淘宝源： npm config set registry https://registry.npm.taobao.org 都安装完成后，可以命令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。 3.安装vue-cli客户端（使用vue） 直接全局安装 vue-cli，用cnpm 会快一些 cnpm install -g vue-cli 4.初始化项目（构建项目） vue init webpack Vue-Project（项目
Vue - 前端工程化
友人A的博客
10-07 1259
1. 模块化相关规范 1.1 概述 传统开发模式的主要问题： 命名冲突 文件依赖 模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间有相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。 好处：方便代码的重用，提升开发效率，方便后期维护 1.2 浏览器端模块化规范 1.2.1 AMD（不推荐使用） Require.js (http://www.requirejs.cn/) 1.2.2 CMD（不推荐使用） Sea.js (http://seajs.gith
前端项目初始化步骤
weixin_45736311的博客
07-05 564
2 通过vue脚手架创建项目、 3 配置vue路由 推荐使用GUI的形式（即：可视化的面板）来创建vue项目 （1）windows + R 打开运行面板 （2）输入cmd （3）打开运行面板 输入vue ui，此时就会启动GUI面板，通过可视化的形式来创建vue项目 （4）点击创建按钮，将西纳古存放路径存放至【桌面（Desktop）——项目实战Day1——code——点击 再次创建新项目】 （5）创建新项目 创建完成 4 配置Element-UI组件库 如何安装Elemen...
Vue前端项目初始化步骤
46054543的博客
03-13 97
ASP.NET Core web 项目初始化 Vue CLI
07-14
在 ASP.NET Core Web ...通过上述步骤，您可以在 ASP.NET Core Web 项目中成功初始化 Vue CLI，并开始使用 Vue.js 开发前端应用程序。这样做可以让您更方便地使用 Vue CLI 提供的工具和功能来管理和构建 Vue.js 项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值