Vue起步

作者: 明明你也一样 | 来源:发表于2019-09-23 09:56 被阅读0次

这篇文章首先会从使用vue-cli搭建项目开始(别担心,我们只做初步了解不会深入使用),为的是让初学者能够更快理解,这样实际上手就会让你有一个大致概念。在开始学习Vue之前,需要的前置知识有:HTML基础标签、CSS基本语法、Javascript语法(熟练掌握)、命令行基础。

搭建环境

vue-cli官方文档为我们提供了两种全局安装vue-cli的方式,选择哪种取决于你使用的是npm还是yarn,需要注意的是随着时间的推移,版本不同可能功能上会有细微差别,所以一切以官方文档为准。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装好了vue-cli之后就可以使用vue命令创建新项目

vue create my-project //项目的名称

这时候会询问我们是使用默认选项还是自定义配置,当然对于初学者来说不需要eslint配置,所以我们选择 Manually select features

我们会看到多个提供给我们的选项,这里只选择第一个babel(空格切换选中取消)

然后询问你是将配置放在一个一个单独的文件里面In dedicated config files还是全部写在package.json文件里面In package.json,这里我们选择package.json

最后会询问你是否将此次配置设为默认配置,当然是no

配置完成后就会开始安装了,之后会提示两个命令让你启动项目

$ cd my-project
$ npm run serve

vue项目启动完成

文件目录

我们再来看看vue项目的文件目录,有哪些需要我们理解的文件

直接看src目录,这里是所有开发代码存放的位置。。。。。。

单页面组件

我们的App.vue文件,Vue官网称它为组件,单页面的意思是结构,样式,逻辑代码都写在同一个文件中,当我们引入这个文件后,就相当于引入对应的结构、样式和JS代码。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</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>

并且node端之所以能识别.vue文件,是因为webpack在编译时将.vue文件中的html,js,css都抽出来合成新的单独的文件。关于webpack的原理不在此赘述。

所以我们的文件大致分为三部分<template><script><style>分别对应着结构、脚本、样式。这样就成功搭建了一个Vue项目,之后深入你就需要去查看详细的官方文档。

相关文章

  • vue-cli 起步配置步骤

    Vue-Cli 是 vue 专用起步工具,用 Vue-Cli 起步能够:① 项目直接安装了Vue、Vue-Rout...

  • Vue 2.0 起步(3) 数据流vuex和LocalStora

    参考: Vue 2.0 起步(2) 组件及vue-router实例 - 微信公众号RSS Vue 2.0 起步(1...

  • Vue 基础

    Vue 起步 Vue V-for循环 (一) Vue V-for 循环(二) Vue v-for表格

  • Vue起步

    1. hello world 项目 打开chrome devtools 感受双向绑定

  • VUE 起步

    单页面 SPA 网页应用的关键在于路由, 过去一个个按钮都会跳转到一个个独立的页面, 由服务器端渲染, 填充相应的...

  • vue起步

    vue官方文档:cn.vuejs.org/v2/guide 兼容性 Vue不支持IE8及以下版本,因为Vue使用了...

  • Vue起步

    1 Hello world 2 TodoList 3 TodoList 改进

  • vue起步

    今天是我学习vue框架的第一个月,我知道什么是spa,什么事单页应用。 什么是大前端!~

  • vue起步

    vue是什么? Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级...

  • Vue 起步

    安装vue Cli 全局安装 vue-cli 创建一个基于 webpack 模板的新项目 安装依赖,走你 查看Vu...

网友评论

      本文标题:Vue起步

      本文链接:https://www.haomeiwen.com/subject/lsatdctx.html