【study】5分钟实现手动搭建Vue项目

1,464 阅读4分钟

1.新建一个文件夹,按需起名

2.在文件夹中新建README和LICENSE

  • (1)作为一个项目,首先最重要的是README和LICENSE,其中README是让使用你项目的人知道如何使用,而LICENSE决定了你的项目的许可范围
  • (2)不写不影响任何程序的运行,但是这却是公开项目必须的

3.创建package.json

  • (1)因为我们写的项目是基于Node,这是NPM定义一个包的方式
  • (2)因为项目一般不作为包发布,所以现在package.json中加入private:true用来标识这个包是私有的,不应该被发布
{
  "private":true
}
  • (3)为项目增加Cli的依赖(按需引入)

3.1 以往我们直接用Vue cli生成的项目,package.json中自动生成,但其实里面有的我们并不需要

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-baidu-map": "^0.21.22",
    "vue-jsonp": "^0.1.8",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

3.2为项目增加依赖

  • npm i -D @vue/cli-service
{
  "private": true,
  "devDependencies": {
    "@vue/cli-service": "^4.5.6"
  }
}
  • 安装Vue (npm i vue)
{
  "private": true,
  "devDependencies": {
    "@vue/cli-service": "^4.5.6"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}
  • 安装Vue单文件组件的编译插件(npm i -D vue-template-compiler)
{
  "private": true,
  "devDependencies": {
    "@vue/cli-service": "^4.5.6",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}
  • 注(1):其中的devDependencies和dependencies,和安装的命令有关; 我们安装@vue/cli-service和vue-template-complier的时候,都加了-D参数,这个-D(或者是--save-dev)参数时用来标识安装的包是用来开发的
  • 注(2):如果去发布一个包,这个是很重要的,开始时,node被设计成用于后端,所以dependencies照片那个的包应当最终一起被安装在生产环境中,而devDependencies中的包是用于开发的,则不应该被安装在生产环境中,好处:可以减小生产包的体积
  • 注(3):开发依赖和运行依赖,作为一名发布人员,你是不会想把这所有依赖一起发布的,两者如何区分呢?vue作为在各个平台上运行必须存在的运行依赖,我们把它放进了dependencies里面,而@vue/cli-service是vue的cli工具,vue-template-compiler是vue的编译工具,这些只要在构建的时候存在就好了,一单构件完毕,我们就不需要这些工具了,我们可以使用构建完的代码直接去运行

4.创建项目的目录结构

  • 因为我们使用了vue cli提供的命令工具@vue/cli-service,所以我们安装它不能随意创建,根据它的要求,必须的文件是src目录
  • (1)现在根目录下面创建src目录
  • (2)在src目录下创建main.js入口文件
  • (3)有了这些基础,我们就需要增加一个运行开发服务的命令

在增加前,说一下npm的npx命令


(1)我们可以通过npx vue-cli-service serve命令启动一个开发环境

(2) npx是npm附带的一个命令

(3)当运行npx时,可以直接运行一个依赖包提供的指令,如果这个依赖包没有被安装在本地,那么会先下载这个包在运行

(4)当这个命令在src目录下运行的时候,会出现报错,提示src/main.js找不到

(5)当你切换到根目录再去执行时,就会发现可以成功运行了 npx的运行时和目录有关系的

  • (4)我们不希望这样,而且我们也希望和我们一起开发的合作者可以通过一句命令就可以启动相同的开发环境,而不是每次都记住很长的命令,所以我们可以在package.json中加入命令
{
  "scripts": {
  //定义start命令,用来运行vue-cli-service命令
    "start": "vue-cli-service serve"
  }
}
  • (5)此时就可以访问localhost:8080,看到一个vue空白页面
  • (6)src/main.js中
import Vue from "vue";
//引入了Vue,因为要创建一个Vue实例,然后通过new Vue生成Vue的实例
const app = new Vue({
//render这个方法用来生成要渲染的虚拟DOM
  render: (createElement) =>
    createElement("div", "Hello World"),
});
//vue实例挂载到一个真实的DOM节点上
app.$mount(document.body);
//保存后,页面会出现Hello World

  • (7)安装vue Devtools(可以看到vue版本2.6.12,存在报错问题)
  • (8)报错问题是因为把vue的实例挂载到了body上,Vue把body替换成了根组件的DOM节点造成的,因为我们用了vue cli,它预置的HTML模板中已经定义了挂载节点#app,所以把实例挂载这个节点上,就不会报错了
app.$mount("#app");
  • (9)main.js写render函数不是很方便,并不见得可以把整个项目全部都写在一个文件中,所以,我们需要在src目录下创建App.vue
///App.vue中
<template>
  <div>Hello World</div>
</template>
//在main.js入口文件中引入App.vue
import App from "./App.vue";
const app = new Vue({
//让render函数直接使用App组件定义生成的虚拟DOM
  render: createElement =>
    createElement(App),
});
  • (10)到此,运行vue项目,就可以看到页面上的Hello World
  • 注(1):最后说一下组件是否要注册的问题,组件不是一定要注册才可以使用的,注册的目的在于放在缓存中,可以直接以组件名调用,这里的App.vue我们直接调用组件,不再进行注册
  • 注(2):当npm作为包管理器时,安装依赖包会产生package-lock.json文件,用来锁定安装包版本以及文件信息,这个文件被一同提交,有助于团队开发的合作