vue-cli

Posted 2022-05-24 menglong1214

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-cli相关的知识，希望对你有一定的参考价值。

Vue 是专注于构建用户界面层的渐进式 javascript 框架，它可以很方便地与各种中间件或者后端应用程序集成使用。Vue 为我们构建界面层提供了大量有用的工具，助我们构建复杂的单页应用。Vue 的特性包括但不限于：

响应式界面
声明式路由
数据绑定
指令
组件
事件处理
属性推断
过滤

Vue2.5 核心库大概只有 17KB，非常小，这就保证了引入 Vue.js 并不会对你的编译后的版本添加过多的代码，加速网站的加载。Vue.js 的官方代码位于：https://vuejs.org/。

image.png

安装

Vue提供了两种方式

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

npm install vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Pracel模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

Vue-Cli

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

vue create my-project

image.png

然后

cd my-project

npm run serve

image.png

该命令会启动一个监听 8080 端口的开发服务器，在浏览器中打开该端口可以看到如下界面:

image.png

项目目录结构如下

image.png

文件index.html 包含如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>my-project</title>
  </head>
  <body>
    <noscript>
      <strong>We‘re sorry but my-project doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

该文件是程序的入口 <div id="app"></div>是vue的插入点，插入点不能放在body标签外，也不能是body标签。

文件main.js 包含如下代码：

import Vue from ‘vue‘
import App from ‘./App.vue‘

Vue.config.productionTip = false

new Vue(
  render: h => h(App)
).$mount(‘#app‘)

import Vue from ‘vue‘ 引入Vue框架
import App from ‘./App.vue‘ App是程序的根元素
render: h => h(App) 渲染App根组件
$mount(‘#app‘) 指定挂载点

文件 App.vue 代码如下：

<template>
  <div id="app">
    <img 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>

一个Vue组件包含三个部分

template html模板
script 组件逻辑
style 样式

技术图片

作者：小菜鸟Soul
链接：https://www.jianshu.com/p/66e0147cb2e2
来源：简书

以上是关于vue-cli的主要内容，如果未能解决你的问题，请参考以下文章