Vue学习笔记二：Vue-cli开启Vuejs项目

最新推荐文章于 2024-07-04 22:35:33 发布
最新推荐文章于 2024-07-04 22:35:33 发布
阅读量165 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44322399/article/details/104446860
版权
本文介绍了Vue-cli的用途，详细讲解了如何安装、使用Vue-cli创建Vue.js项目，启动项目，并对项目文件结构进行了说明，包括build、config、src等关键文件夹的作用。
摘要由CSDN通过智能技术生成

目录

一、什么是Vue-cli

二、安装Vue-cli

三、使用Vue-cli创建Vuejs项目

四、启动Vuejs项目

五、项目文件介绍

一、什么是Vue-cli

Vue-cli是Vue的脚手架工具，即帮助我们写好Vue.js基础代码的工具。

  • 目录结构
  • 本地调试
  • 代码部署
  • 热加载
  • 单元测试

二、安装Vue-cli

node -v
//查看node版本
npm install -g vue-cli
//全局安装vue-cli

三、使用Vue-cli创建Vuejs项目

vue init webpack <app-name>

四、启动Vuejs项目

cd <app-name>
npm run dev

五、项目文件介绍

  • build文件夹：webpack配置相关
  • config文件夹：webpack配置相关
  • node_modules文件夹：npm install安装的依赖代码库
  • src文件夹&#
最低0.47元/天 解锁文章
APRII2
关注
vue-cli（vue）项目的安装及开启
weixin_37881839的博客
08-18 636
1.安装需要的环境及vue-cli： 【node.js】 官方：http://nodejs.cn/download/ 下载安装； 命令行输入：node -v，检查是否安装成功； 【npm】 官网安装node.js后，就已经自带npm； 命令行输入：npm -v，检查是否安装成功； 【cnpm】 命令行输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 命令行输入：cnpm -v，检查是否安装成功； 【webp
vue-cli—vue-cli安装和启动
jiaojsun的博客
06-16 2177
$ npm install -g vue-cli $ vue -V 2.9.6 $vue init webpack vue-exp 可以一直走 然后进入项目根目录 大致认识一下webpack
vue-cli启动流程
w1234567465的博客
08-20 1642
一、目录结构 1、build：构建相关 2、config:配置相关 例如：index.js下，更改启动的ip和端口号: 3、node_module:相关依赖，就像java中用maven下载的依赖一样。 4、src:编辑的时候的目录 ①asserts：放静态资源 ②components:放组件 ③router下index.js:放有关路由的配置 ④App.vue:单文件组件 ⑥main.js:主js文件，和启动有关 ⑦static：放静态文件 5、.bavelrc:做语法适配转换的 6、index.html
【Vue学习笔记】vue-cli-service相关配置说明
weixin_47192515的博客
04-19 4918
vue-cli-service相关配置说明 vue-cli-service： 在脚手架的package.json中，serve配置的是与项目启动相关的信息： --open 在服务器启动时打开浏览器 --copy 在服务器启动时将 URL 复制到剪切版 --mode 指定环境模式 (默认值：development) --host 指定 host (默认值：0.0.0.0) --port 指定 port (默认值：8080) --https 使用 htt
Vue 学习笔记（4）Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
2401_84434237的博客
07-04 399
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档json`：模块基本信息项目开发所需要的模块，版本，项目名称。：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。vue-cli 中使用 Axios安装 axios：前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档[外链图片转存中…(img-WdLpNiH1-1720103720849)]
【vue学习笔记】vue-cli-service的使用
weixin_36089438的博客
09-05 1万+
学习资料 vue-cli项目中，会安装给一个名为vue-cli-service的命令。 vue-cli-servie serve vue-cli-service serve 会启动一个开发服务器（基于webpack-dev-server）并且附带了开箱即用的模块热重载（Hot-Module-Replacement）。 用法：vue-cli-service serve [options] [entry] 选项： --open 在服务器启动时打开浏览器 --copy ..
Vue学习笔记---vue-cli
qq_44242707的博客
11-12 919
Vue-cli 1.配置文件 vue.config.js 2.快速原型开发：对单个vue文件进行快速原型开发 vue serve：需要安装全局依赖，机器一致性无法保证，对应目录执行：vue serve file vue build：将目标文件构建成一个生产环境的包用来部署，对应目录执行：vue build file 3.创建项目 vue create project 选取preset：默认/手动，.vuerc保存设置 vue ui：图形化创建和管理项目 4.插件： 每个CLI插件都会包含一个(用来
vue-cli-service: command not found报错引发的血案
热门推荐
astonishqft的博客
09-07 1万+
vue-cli-service: command not found报错引发的血案
Vue学习笔记：vue-cli脚手架安装
前端互助会
12-18 350
vue-cli 是vue官方提供的一个脚手架工具，用于初始化一个Vue项目；
南京工业大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-04
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
下单系统的Spnigboot和微信小程序实现（全栈微信小程式下单）.zip
10-04
下单系统的Spnigboot和微信小程序实现（全栈微信小程式下单）
基于Java开发的智能文件管家设计源码
10-04
该项目是一款基于Java的智能文件管家设计源码，涵盖102个文件，包括29个Java源文件、27个类文件、19个XML配置文件、10个YAML文件、8个列表文件、4个属性文件、4个JAR包文件以及1个Git忽略文件。该系统旨在提供高效便捷的文件管理解决方案。
基于YoloV8的简单目标检测和跟踪，使用KMNET进行鼠标移动（处理多目标移动抖动，处理鼠标平滑移动）.zip
10-04
基于YoloV8的简单目标检测和跟踪，使用KMNET进行鼠标移动（处理多目标移动抖动，处理鼠标平滑移动）
基于Vue和JavaScript的心旅途个性化推荐旅游平台设计源码
10-04
本项目是一款基于Vue和JavaScript开发的心旅途个性化推荐旅游平台设计源码，整合了513个Java文件、76个PNG图片、70个XML配置文件、62个JavaScript文件、42个Vue组件文件、28个CSS样式文件、22个HTML文件、18个YAML配置文件、16个属性文件、11个Vue模板文件，总计919个文件。平台采用现代化前端技术堆栈，旨在为用户提供个性化的旅游推荐服务。
基于Python的AutoLine自动化测试开源平台设计源码
最新发布
10-04
AutoLine是一个基于Python的通用自动化测试开源平台，包含了657个文件，涵盖228个PNG图片、209个CSS样式、95个JavaScript脚本、39个Python源代码、21个HTML文件、19个XML文件、14个GIF图片、6个DS_Store文件、5个文本文件、4个Markdown文件。该平台的设计源码由多种编程语言编写，旨在提供灵活高效的自动化测试解决方案。
微信小程序图像裁剪工具_ e-cropper.zip
10-04
微信小程序图像裁剪工具_ e-cropper
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值