【vue笔记】1.vue结构分析--创建一个简单的vue工程来说明一下vue的基本框架

最新推荐文章于 2024-05-16 17:54:12 发布

AXIMI

最新推荐文章于 2024-05-16 17:54:12 发布

阅读量307

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/AXIMI/article/details/87905877

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在控制台创建一个简单的vue工程：

在需要放置工程的目录下打开控制台，输入：

vue init webpack test

可以创建一个名为test的项目。然后会提示对项目的一些属性进行配置：
在这里插入图片描述

Project name	工程名，不能使用大写一般直接enter
Project description	输入一句话描述这个工程
Author	作者
Vue build	打包方式直接enter
Install vue-router	是否安装路由选yes
Use ESLint to lint your code	ESLint是检查代码是否规范的东西，不要选！检查代码跟教导主任一样严格！选no
Set up unit tests	单选测试选no
Setup e2e tests with Nightwatch?	端到端的测试框架NightWatch 选no
Shoulder we run `npm install`for you after thr project has been created?(Recommend)	是否在工程创建后就去跑 npm 安装依赖选择yes

创建完后显示的内容为：
在这里插入图片描述
创建完工程后，在目录文件下会出现创建好的vue工程：

有两种方式可以启动项目，第一种是在控制台中输入npm命令，另一种是在编译器中运行项目。
第一种：npm启动项目。在控制台中输入：

cd test
npm run dev

就可以启动项目了，控制台会显示：
在这里插入图片描述
在不关闭控制台的条件下在浏览器中输入：http://localhost:8080，显示为：

第二种，在webstorm中运行项目：
第一次运行项目要编辑一下运行配置：

+号位置加一个npm，然后配置：
Name：随便写
Command：run
Scripts：dev
配置完后运行项目，同样可以得到上面的页面。

Vue的基本框架：

整个工程的目录如下：

在这里插入图片描述

文件命名规范：

文件类型	文件说明
.vue文件	.vue文件全部大驼峰命名法，仅入口文件index.vue为小写
测试文件	全部以测试文件名.spec.js 命名
资源文件	全部小写字母字符命名，由2个以上的词组成，以“-”分割

不同文件夹的功能：

文件夹名	文件夹功能
src	包含所有的.vue文件
build	存放用于编译用的webpack配置与相关的辅助工具代码
config	三大环境配置文件，用于设定环境变量和必要的路径信息
test	测试文件
static	静态文件
dist	npm run build指令下生成的输出文件

vue的主要文件：

文件名	文件功能
main.js	通过import引入vue.js组件，创建vue对象的实例
index.html	将vue的实例绑定到一个页面
App.vue	一个组件，表示一个vue组件

首先我们存在一个App.vue组件，App.vue中含有</router-view>，路由匹配成功的页面都在这里进行渲染和切换，因此App.vue是我们的主组件。App.vue通过export default 导出组件的名称为App;
Main.js通过import App from './App’语句引入App组件，然后通过new Vue创建vue实例并初始化一些插件。main.js中的el将’#app’挂载到index.html中的
<div id=“app”>中。且用<template>替换。最终将index.html的内容<div id=“app”>的内容替换为<App></App>，而<App></App>就是我们调用App组件的方式。

main.js:

// 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 from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js是整个工程的入口文件，功能是引入各种文件、初始化vue实例和插件；
new Vue是新建一个vue对象；
main.js中的el将’#app’挂载到index.html中的<div id=“app”>中。且用<template>替换。最终将index.html的内容<div>的内容替换为为<App></App>。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test3</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html是主渲染页面。通过<div id=“app”></div>可以将main.js中初始化的vue对象内容在web页面中显现。
vue的el项值与index.html中div的id值相同

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
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>

App.vue是主组件，通过export default 导出组件的名称为App；
所有的页面都是在App.vue下进行切换的;
App.vue中含有<router-view/>，所以路由匹配成功的页面都在这里进行渲染和切换。

App.vue单页组件的构成：

模块名	模块内容
< template >	视图模板，包括具体的页面内容
< style >	组件样式表
< script >	组件定义，创建内部访问数据

AXIMI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【vue笔记】1.vue结构分析--创建一个简单的vue工程来说明一下vue的基本框架

在控制台创建一个简单的vue工程：在需要放置工程的目录下打开控制台，输入：vue init webpack test可以创建一个名为vue的项目。然后会提示对项目的一些属性进行配置：Project name工程名直接enterProject description输入一句话描述这个工程Author作者Vue build打包方式直接enterI...
复制链接

扫一扫

专栏目录