Vue-cli

最新推荐文章于 2024-05-16 23:40:36 发布

入戏三分_s

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量776

点赞数 22

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52964909/article/details/134811385

版权

Cli的安装

#安装cli
npm install -g @vue/cli
#查看版本
vue --version

创建vue项目

执行命令vue create my-project
目录结构
- node_modules：项目的依赖中心
- public：静态资源文件夹，和assets不同的是public不会被webpack进行打包，使用路径的时候要使用绝对路径
- src：项目的核心区域，所有的开发文件的核心内容区域，包括组件，静态资源等等
- asstet：静态资源文件夹，和public不同的是assets文件夹会被webpack打包，所以要使用相对路径
- components：Vue功能组件的存放位置，内部存放的是公用的组件
- views：公共文件，主要以各个独立页面为主
- APP.vue：整个vue的根组件，所有的vue组件都是从这个组件中拓展的，App根组件最后通过编译后将内容渲染到.html文件中
- main.js：vue的入口文件，vue文件初始化位置
- .gitignore：GitHub相关配置文件，作用是git再提交代码的时候指定相关忽略格式文件
- babel.config.js：babel的配置文件
- package.json：配置（记录了）项目的相关模块，项目相关配置信息等等
- package-lock.json：作用是记录的当前项目安装的相关依赖版本，并且记住了当前所有依赖的关联关系，如果下次vue进行编译的时候会按照这个文件进行编译
- README.md：文件的作用是项目相关的使用方法，和使用说明

cli的编译过程

我们知道vue-cli的起步命令是npm run serve，那么这个命令干了一些什么，为什么可以执行相关的编译程序？

首先我们要知道npm run 执行一个命令或者是一个文件内容
我们看package.json文件中

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    ....
  },
  "eslintConfig": {
    ...
  },
  "browserslist": [
    ...
  ]
}

我们知道scripts是npm执行目录，也就是在scripts这个对象中的key就是npm run的命令值
vue-cli提供了三个命令

serve：这个是我们开发使用的命令，执行编译和热更新（ctrl+s的时候浏览器会实时更新）
build：工作中如果我们本地调试完后需要部署代码前，进行打包的命令
lint：命令的作用是检验文件代码的合格性（对eslint的校验）

我们以npm run serve为例
第一步命令会找到node_modules文件夹中.bin文件夹内部的vue-cli-service文件
在这里插入图片描述
然后我们根据路径查找到了相关文件

核心代码路径

severice.js文件是整个编译过程的核心文件

cli的起步文件

main.js

import Vue from 'vue'
// 相对路径引入的App.vue文件
import App from './App.vue'

// 这行命令的作用是给生产环境配置的提示消息，如果为true或者默认不配置，会有相关提示语
Vue.config.productionTip = false

new Vue({
  // 渲染节点
  render: h => h(App),
  // 挂载函数，内部#app是vue的根节点
}).$mount('#app')

index.html

<!DOCTYPE html>
<html lang="en">
  <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">
    <title></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>

noscript标签的作用是当script标签加载不出来或者抛出错误的时候替换内容，目的是在浏览器中提供友好提示
<div id="app"></div>是整个vue项目的根标签，vue需要挂载的标签

App.vue
App.vue文件是整个项目的根组件，项目中所有的页面切换页面显示都是在这个组件基础上渲染的
我们将整个App.vue文件清空后发现
```
<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  components: {
    
  }
}
</script>

<style>

</style>
```
上面的结构是.vue文件的基础结构
- template元素的作用是搭建vue文件的结构
- script元素的作用是对当前文件逻辑进行交互
- style元素的作用是对当前文件的样式进行修饰
  我们之前开发中.js文件只有逻辑.css文件只有样式.html文件只有结构，但是.vue的组建就是将视图和逻辑进行了一个整合

入戏三分_s

关注

22
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Vue-cli

我们知道vue-cli的起步命令是npm run serve，那么这个命令干了一些什么，为什么可以执行相关的编译程序？我们知道scripts是npm执行目录，也就是在scripts这个对象中的key就是npm run的命令值。第一步命令会找到node_modules文件夹中.bin文件夹内部的vue-cli-service文件。App.vue文件是整个项目的根组件，项目中所有的页面切换页面显示都是在这个组件基础上渲染的。是整个vue项目的根标签，vue需要挂载的标签。上面的结构是.vue文件的基础结构。
复制链接

扫一扫