vue第三天笔记05——使用vue-cli脚手架工具创建一个项目

2024-05-10 19:58:24

1.新建文件夹，命名不能是中文

2.打开该文件夹，在该文件夹路径下输入cmd，进入命令行

3.输入下面的命令

vue init 模板名项目名称(随便取名，要是英文)

模板名有三种：

simple：只有一个index.html文件，基本没用

webpack：可以使用(大型项目)Eslint 检查代码规范，单元测试

webpack-simple：个人推荐使用, 没有代码检查

4.根据提示依次输入三行命令，便可以进入新建的项目

5.一些注意事项：

（1）在项目执行时，不要关闭cmd命令行，否则会无法打开项目

解决方法是，重新进入命令行并输入：npm run dev

（2）项目拷贝给别人的时候，需要删除项目里面的node_modules文件夹

重新下载node_modules的方法是命令行输入：npm install

（3）移动端需要在index.html里面添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

6.项目目录介绍：

1.node-modules文件夹: 放置当前项目所有的依赖
2.src文件夹
（1）App.vue
根组件，相当于<div id="app"></div>内部的内容
（2）assets文件夹(存放静态资源)
images(需要时手动新建)：放置图片
css(需要时手动新建)：放置css文件
js(需要时手动新建)：放置js文件
（3）main.js：全局脚本文件（项目的主入口）
（4）components(需要时手动新建)：放置各种组件(vue文件)
3.index.html：项目的首页
4.data文件夹(存放动态变化的数据，需要时手动新建)
（1）images
动态变化的图片
（2）json文件（里面的图片路径，相对于index.html）
存放动态数据，包括动态变化的图片的路径等
5. .babelrc：用来设置转码的规则和插件
6. .editorconfig：用来定义项目的编码规范
7. .gitignore：用来告诉git，上传项目的时候，忽略哪些文件或文件夹
8.package-lock.json：锁定安装时包的版本号，确保项目给别人时，npm install下载的依赖保持一致
9.package.json：项目及工具的依赖配置文件
10.README.md：项目介绍文档
11.webpack.config.js：打包配置文件
12.dist文件夹：项目打包后自动生成的文件夹

vue第三天笔记05——使用vue-cli脚手架工具创建一个项目相关推荐

Vue.js 学习笔记十二：Vue CLI 之创建一个项目
目录创建一个项目创建一个项目运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
使用vue-cli脚手架工具创建vue项目
vue-cli 脚手架安装: 1) 确保node环境:安装vue-cli需要在node环境下安装,所以首先确保自己安装了node,检查自己电脑是否安装了node ,可以在命令行工具内执行: node ...
OpenGL学习笔记：使用深度缓冲(Depth Buffer)创建一个旋转的立方体
如果不使用深度缓冲,创建的立方体的某些本应被遮挡住的面被绘制在了这个立方体其他面之上.OpenGL是一个三角形一个三角形地来绘制你的立方体的,所以即便之前那里有东西它也会覆盖之前的像素.因为这个原因, ...
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
Django学习笔记-1 在Anaconda下安装和创建Django项目
一.创建虚拟环境 1.打开Anaconda prompt 2.创建虚拟环境 conda create -n mydjango_env 3.查看以及创建的虚拟环境 conda env list 会展示如 ...
vue 引入的方法用在template_?【有手就行】轻松打造属于自己的Vue工程化脚手架工具...
前言为什么闲得蛋疼要自己做脚手架官方脚手架工具创建的项目不能马上进行搬砖? 每次创建新项目就得复制粘贴旧项目的配置再CRUD? 能不能自己造个劳资御用的个性化定制版脚手架? 以Vue举例来说,虽然 ...
唐金州的Vue开发实战学习笔记（基础篇）
Vue开发实战学习笔记简易的Vue程序组件事件插槽单文件组件双向绑定虚拟DOM与key属性组件更新状态data与属性props vue的响应式更新计算属性和侦听器计算属性 com ...
vue.js 三种方式安装(vue-cli)
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
目录: 一.前言二.Vue是什么? 1.简介 2.发展史 3.为什么要学习Vue? 4.jQuery.javascript.Vue的区别 5.Vue框架构造三.Vue的使用 1.Vue环境搭建 2 ...

最新文章

热门文章