Vue CLI : 项目流程分析

Vue CLI: 项目流程分析

一、使用Vue-cli创建Vue项目

1. 命令行中输入 npm install -g @vue/cli 安装好vue-cli
2. 命令行中输入：vue create 项目名称 ，创建一个项目

二、项目分析

1、public目录下的index.html

vue-cli创建的项目为单页面应用，index.html作为整个项目唯一的html文件。

在index.html中，可以使用 lodash template 语法

• <%= VALUE %> 用来做不转义插值；
• <%- VALUE %> 用来做 HTML 转义插值；
• <% expression %> 用来描述 JavaScript 流程控制

<!-- 表示assets文件夹中的logo.png -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 表示标题为project -->
<title><%= htmlWebpackPlugin.options.title %></title>

在index.html中，只需要在body标签中写入一行代码即可,会在main.js中创建Vue的实例对象，用来接管这个标签

<div id="app"></div>

2、src目录下的main.js

在main.js文件中，需要引入两个文件，一个是vue.js这个框架，一个是App.vue这个文件，App.vue这个文件用于放置所有的组件

/*
  完整写法：import Vue from "../node_modules/vue/dist/vue.js";
  意思是： 导入vue.js框架 ,用Vue这个方法接收
*/
import Vue from 'vue'
// 导入App.vue这个文件,用App这个对象接收
import App from './App.vue'

Vue.config.productionTip：作为Vue中的一个属性，表示vue 在启动时是否生成生产提示

// 设置为 false 以阻止 vue 在启动时生成生产提示
// 设置为true会在控制台多显示一行 See more tips at https://vuejs.org/guide/deployment.html
Vue.config.productionTip = false

在mian.js中创建Vue的实例对象

其中，render表示:

• ​ 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力

• ​ 值为一个渲染函数，该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode

另外：

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数

所以：render: h => h(App) 的意思为

获取一个名为App的虚拟节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount阶段，渲染成真实 DOM 节点，并挂载到根节点上

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

3、src目录下的App.vue

在介绍App.vue之前，我们需要知道.vue文件有一个特定的书写格式

<template>
      <!-- 在这里书写组件的html结构 -->
</template>

<script>
//如果这个组件还有子组件，在这里引入，没有就不写import
import xxx from './xxx.vue'
//export default: 为模块指定默认输出  
export default {
    //这里书写组件的属性，如组件名name,子组件components，组件方法methods，接收参数props等
    //组件名必填
}
</script>

<style lang="scss" scoped>
  // 这里书写组件的样式，
  //如果写了lang=“scss”表示用scss语言写，不写表示用css书写样式
  //如果写了scoped属性，表示只作用于当前组件
</style>

下面介绍APP.vue

<template>
  <!-- 模板 -->
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 这在里面可以插入子组件，前提是script标签里面引入了子组件 -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// 导入HelloWorld.vue这个文件,用HelloWorld这个对象接收
import HelloWorld from './components/HelloWorld.vue'
//export default: 为模块指定默认输出
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss">
  // 指定语言为scss
  //如果写了scoped属性，表示只作用于当前组件
#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>

4、src目录下的components目录下的HelloWorld.vue

HelloWorld.vue这个文件是作为一个例子供大家参考的，一般都会删除

HelloWorld.vue的结构和APP.vue类似，就不再重复了

三、总结

项目启动命令：npm run serve

项目显示页面：index.html

项目vue实例：main.js

项目的总组件：App.vue

项目的子组件：如HelloWorld.vue等众多组件