Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目_vuecli搭建项目

最新推荐文章于 2024-05-28 11:10:38 发布

2401_84447065

最新推荐文章于 2024-05-28 11:10:38 发布

阅读量451

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447065/article/details/138957425

版权

程序员专栏收录该内容

160 篇文章 0 订阅

订阅专栏

总结

对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

一、什么是VueCLI

1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那么无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

3、CLI是什么意思？

CLI是Commond-Line Interface，翻译为命令行界面，俗称脚手架。
VueCLI是一个官方发布vue.js项目脚手架。
使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。

4、脚手架长什么样？

5、脚手架依赖于node.js和webpack

二、安装Vue CLI脚手架

//默认安装脚手架3
npm install -g @vue/cli

//安装脚手架2
npm install -g @vue/cli-init

//脚手架2创建项目
vue init webpack my-project

//脚手架3创建项目
vue create my-project

三、runtime-compiler和runtime-only的区别

1、runtime-compiler加载过程

template -> ast -> render -> vdom -> UI

2、runtime-only加载过程：（性能更高，代码更少）

render -> vdom -> UI

3、小结

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler；

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only；

4、代码实例

main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
// const cpn = {
//   template: '<div>{{message}}</div>',
//   data() {
//     return {
//       message: '我是组件message'
//     }
//   }
// }

new Vue({
  el: '#app',
  render: function (createElement) {
    // 1.普通用法: createElement('标签', {标签的属性}, [''])
    // return createElement('h2',
    //   {class: 'box'},
    //   ['Hello World', createElement('button', ['按钮'])])

    // 2.传入组件对象:
    return createElement(App)
  }
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

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

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>

index.html

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

5、npm run build执行过程

6、npm run dev执行过程

四、认识Vue CLI3

1、vue-cli 3 与 vue-cli 2 版本的区别？

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2、通过脚手架3构建项目

vue create my-project

运行项目

npm run serve

注意：

之前学习的时候main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

通过 Vue CLI3创建的项目main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

两种写法没区别。

el多了一个判断，el被解析为$mount。