Vue项目 一、准备以及初始项目解析

最新推荐文章于 2024-05-16 17:54:12 发布
最新推荐文章于 2024-05-16 17:54:12 发布
阅读量6.8k 收藏 8
点赞数 4
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mpdemp/article/details/70243611
版权

准备

–

技术栈

  • Html+css+javascript
  • webpack
  • ES6基本语法
  • Vue
  • vue-router 路由
  • axios 网络请求
  • Vuex 状态管理
  • scss css预编译

安装

1、安装vue
npm install vue -g
2、安装vue-cli脚手架
npm install --global vue-cli

项目初始化

1、初始项目

    使用vue-cli脚手架工具初始化一个vue项目:

vue init webpack my-object
cd my-boject
npm install
npm run dev

项目目录如图：

这里写图片描述

build  //最终发布的代码存放的位置
config   //配置目录，包括端口号等
node_modules  //npm加载的项目依赖模块
src  //这里是我们要开发的目录，基本上要做的事情都在这个目录里。
static  //静态资源目录，如图片、字体等。
package.json //项目配置文件，这个用于控制项目的依赖。使用npm加载依赖时，会按照这个文件里面描述的各个依赖模块的版本进行查找，先查找node_modules目录下是否已存在某个依赖，若不存在再去网络下载，但是不会查找本地缓存中已经下载好的。
index.html  //项目的入口
static/.gitkeep  //这个文件保证这个文件夹在上传到github的时候会始终存在。因为github本身会忽略掉空文件夹。
.babelrc  // babel语法编译器的编译配置
.editorconfig  //编辑器的配置
.eslintignore  //忽略语法检查的目录
.eslintrc.js  //eslint的配置文件
.gitignore   //一些不需要上传的文件或者目录
README.md   //项目的描述文件


我们最需要关注的，就是src里面的内容

这里写图片描述

asset  //放置一些图片
components  //组件目录，用于放置一些组件
router  //路由文件
App.vue  //项目入口文件，可以将组件都写在里面
main.js  //项目的核心文件

初始文件展示

//index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <
最低0.47元/天 解锁文章
「已注销」
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue初始化的空白项目
06-22
在这个“vue初始化的空白项目”中，我们可以看到几个关键文件和目录，它们构成了一个基础的Vue应用结构。让我们逐一解析每个文件和目录的作用： 1. `.gitignore`：这是一个Git版本控制系统使用的文件，它定义了在...
vue3初始化项目 sass vite ts
08-01
Vue3初始化项目通常涉及到一系列配置和文件，包括前端框架Vue3、样式预处理器Sass以及TypeScript的集成。下面将详细解析这些知识点及其在实际项目中的应用。 **Vue3** Vue3是Vue.js的最新版本，它带来了许多性能...
Vue学习笔记（2）
lzx_sao的博客
09-04 159
Vue学习笔记（2）
Vue学习-如何看懂vue项目
qq_31856061的博客
12-12 3843
1 先看配置文件 ① package.json文件就是一个JSON对象,以json的形式声明项目的基本信息，每一项信息就是当前项目的一项设置。比如name就是项目名称，version是版本; ② 有了package.json文件，直接使用npm install命令，就会在当前目录中安装所需要的模块;如此就不用一 一单独安装; { "name" : "xxx", "version" : "0.0.0", } 1.1 各字段含义 1.1.1 scripts scripts: 运行脚本命令的npm命令
如何搭建一个vue项目(完整步骤)
最新发布
y2020520的博客
05-16 3135
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；最后附上demo地址：https://github.com/yanxulan/vue-demo.git。参考：https://www.cnblogs.com/yanxulan/p/8978732.html。d：输入ip： http://localhost:8010/#/first，查看页面效果。
从零开始搭建一个vue项目（保姆级教程）
weixin_50989469的博客
07-23 4299
我这边在本地起了一个后台服务（建议后台服务做好跨域配置），模拟接口访问调用，一共测试了三种方式：①get无参请求 ②get有参请求 ③post请求json传参。新建api文件夹，放在api文件夹下，需要引入http文件，js文件地址：src/api/pageB.js。项目建好之后，就可以配置ui组件了，可以选择npm去装，也可以选择yarn安装，我把两个命令都列出来了。第二步，选择【Vue.js】，输入自己项目的名称，点击【Create】生成项目。在main.js中import之后，ui组件才正式生效。
vue入门
yifei_345678的博客
09-15 3067
vue是一个构建用户界面UI的渐进式javascript框架渐进式的框架
Vue的初始调用方法
热门推荐
qq_40666620的博客
09-05 2万+
Vue的初始调用方法 如果想进入vue component时就立即执行该组件中methods中的其中一个方法，并且要求在vue加载完毕后（如组件中data中的数据已经加载完毕），可以使用vue自带属性：vue.mounted,在其中调用methods中的方法即可，如下 export default { data:function () { return { a...
Vue 项目构建与开发入门.zip
07-09
Vue.js 是一款非常流行的前端JavaScript框架，用于...通过学习这本“Vue 项目构建与开发入门”的小册，你将逐步掌握Vue的基础知识，包括项目初始化、组件化开发、状态管理和路由设置等，从而顺利地步入Vue开发的世界。
vue新建项目cmd命令详细解析.docx
12-16
本文将详细解析 Vue 新建项目的 cmd 命令，包括项目创建、Git 存储库初始化、插件安装、 npm 包管理等内容。 一、项目创建 使用 Vue CLI 创建新的 Vue 项目需要选择预设（preset），包括三个选项：.vue 2（babel, ...
vue项目添加多页面配置的步骤详解
10-16
在初始创建Vue项目时，通常只有一个默认的入口文件（如`src/main.js`），它对应的HTML模板是`public/index.html`。然而，随着项目发展，可能会有新的业务模块，这时就需要创建多个入口文件和对应的HTML模板，以实现...
vue项目初始化
init_yanxiao的博客
01-17 1044
项目初始化 使用 Vue CLI 创建项目 -Vant 组件库的导入方式 制作使用字体图标的方式 如何在 Vue 项目中处理 REM 适配 -axios 请求模块的封装 1.1 使用 Vue CLI 创建项目 如果你还没有安装 VueCLI，请执行下面的命令安装或是升级： npm install --global @vue/cli 在命令行中输入以下命令创建 Vue 项目： vue create toutiao-m [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(i
大白话讲解Vue项目结构
我与代码的故事
03-06 940
一：讲解环境 Win10、IDEA2019、Vue3 二：讲解环节 笔者用vue ui创建了一个vue的初始项目。 项目结构如下： — node_modules作用：整个项目里用到的依赖的文件。 — public作用：公用的目录。 — src作用：项目的源码目录。 — assert作用：专门放资源的文件目录。 — components作用：组件目录。 — router作用：路由的目录。 — views作用：页面目录。 — App.vue作用：Vue项目的主组件，页面入口文件，所有页面都在App.vue下进
Vue.js项目结构说明
will5451的博客
06-07 3713
vue项目结构图简单介绍目录结构build目录是一些webpack的文件，配置参数什么的，一般不用动 config是vue项目的基本配置文件 node_modules是项目中安装的依赖模块 src源码文件夹，基本上文件都应该放在这里。 —assets 资源文件夹，里面放一些静态资源 —components这里放的都是各个组件文件 —App.vue App.vue组件 —main.js入口文件 st...
vue学习二：vue初始化的过程一（实例初始化、生命周期beforecreate---create）
梦不止步的博客
11-05 8072
vue的MVVM模式看完后，接下来看一下，new Vue（{}）加载的过程是什么：     从_init方法进入分析主要分三块   先分析实例初始化： 1.initLifecycle(vm)initLifecycle(vm)： 生命周期变量初始化 options.abstract用于判断是否是抽象组件，组件的父子关系建立会跳过抽象组件，抽象组件比如keep-alive、t...
vue项目初始化，以及使用WebStrom搭建新的vue项目
Zp_akl的博客
01-31 259
vue新项目准备： 1、安装nodejs，官网下载傻瓜安装 node -v 验证 2、npm包管理器，是集成在node中的，所以安装了node也就有了npm npm -v 验证 3、安装cnpm npm install -g cnpm --registry=http://registry.npm.taobao.org （完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnp...
一、初始Vue
qq_63011146的博客
02-01 673
① 创建一个Vue实例（vue2)： <div id="app"> <!-- 在页面中，通过插值表达式可以直接使用Vue管理的数据。注意： Vue管理的数据是响应式的，所谓响应式，指的是，当前数据发生改变是，会重新渲染页面。 --> <h2>{{msg}}</h2> <p>{{name}}</p> <p>{{age}}</p>
vue项目介绍
u012086400的专栏
12-08 7808
项目效果展示：项目中遇到的问题： 下拉加载更多在chrome浏览器的手机模拟中没有响应mint-ui框架中loadmore自带的loadBottom方法，后来把代码部署到手机上可以正常调用，加载出了更多数据。 使用mint-ui 中的 Swipe，必须给此标签元素设置高度才能正常显示（没设置高度检查元素的时候发现高度为0，内部元素并没有将盒子撑开） 使用到的技术点 vue-router路由 axio
vue-cli main.js引入.scss文件报错的原因
qq_42148925的博客
08-30 787
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router ...
若依框架vue项目解析
08-18
对于Vue项目的解析，可以按照以下步骤进行： 1. 首先，在Vue项目中，通常会使用Vue CLI来创建和管理项目。Vue CLI是一个官方提供的脚手架工具，可以帮助我们快速搭建Vue项目的基础结构。 2. 在Vue项目中，主要的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值