vue-cli目录结构分析
vue3初始化一个项目,查看其项目结构,会发现比vue2的更加简洁。
package.json说明
项目的配置文件,定义了项目的基本信息以及项目的相关包依赖,npm运行命令等,位于项目根目录。
scripts: 定义了一些npm命令。
{
"name": "TestConsole",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"element-ui": "^2.13.0",
"portfinder": "^1.0.21",
"sortablejs": "^1.10.2",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-router": "^3.1.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.2.0",
"@vue/cli-plugin-eslint": "~4.2.0",
"@vue/cli-service": "~4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
如:
dependencies:运行时依赖(生产环境)
devDependencies:开发时的依赖(开发环境)
src/main.js是整个项目的入口文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false //生产环境提示,这里设置成了false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App } //引入App组件
})
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false //生产环境提示,这里设置成了false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App } //引入App组件
})
src/app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default { //export default {} 即导出这个组件,外部可以引用
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/router/index.js 路由文件
vue3并没有自动生成该文件,需要自己创建router文件夹,index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [//配置路由
{
path: '/',//访问路径
name: 'Hello',//路由名成
component: Hello//路由需要的组件
}
]
})
vue-cli目录结构分析的更多相关文章
- Vue 项目目录结构分析
Vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ic ...
- Vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染
一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- VUE CLI 3.0 安装及创建项目
一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/ 详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02
一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...
随机推荐
- sql-lib闯关41-50
第四十一关 这关和第三十九关一样,只是错误没有回显 获得版本和数据库名 ?id=0 union select 1,version(),database() %23 获得表名 ?id=0 un ...
- OpenCV-Python 读取显示图像 | 五
目标 在这里,你将学习如何读取图像,如何显示图像以及如何将其保存回去 你将学习以下功能:cv.imread(),cv.imshow(),cv.imwrite() (可选)你将学习如何使用Matplot ...
- 理解BERT:一个突破性NLP框架的综合指南
概述 Google的BERT改变了自然语言处理(NLP)的格局 了解BERT是什么,它如何工作以及产生的影响等 我们还将在Python中实现BERT,为你提供动手学习的经验 BERT简介 想象一下-- ...
- 优化Python代码的4种方法
介绍 作为数据科学家,编写优化的Python代码非常非常重要.杂乱,效率低下的代码即浪费你的时间甚至浪费你项目的钱.经验丰富的数据科学家和专业人员都知道,当我们与客户合作时,杂乱的代码是不可接受的. ...
- Linux/CentOS7搭建Anaconda运行环境
1. 安装miniconda 下载并安装miniconda到$HOME/.miniconda/ #从官网下载 wget -c "https://repo.anaconda.com/minic ...
- java程序:转化金额
在处理财务账款时,需要将转账金额写成大写的.也就是说,如果要转账123456.00元,则需要写成“壹拾贰万叁仟肆佰伍拾陆元整”.所以常常需要通过程序控制自动进行转换.本实例实现了小写金额到大写金额的转 ...
- HTML 基础(六)
一.脚本 JavaScript 是 HTML 页面具有更强的动态和交互性 <script> 标签 <script> 标签用于定义客户端脚本,<script> 元素既 ...
- 【Net】ABP框架学习之正面硬钢
前言 本文介绍另一种学习ABP框架的方法,该方法为正面硬钢学习法... 我们不去官网下载模板,直接引用DLL,直接使用. WebApi项目创建 首先创建一个WebApi项目,结构如下. 然后Nuget ...
- B [JLOI2012]树
时间限制 : - MS 空间限制 : - KB 评测说明 : 1s,128m 问题描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点 ...
- 关于C#三层架构增删改查中的“登录”问题
先来一个界面: DAO中的方法: 实现代码如下: 这里需要特别注意的是一个“安全性”的考虑: 当登入成功时,把登入时输入的用户名赋值到Session,然后在后面的页面进行判断--此时Session保留 ...