Vue CLI

Vue CLI

在开发大型单页面应用时,需要考虑项目的组织结构、项目构建、部署、热加载、代码单元测试等多方面与核心业务逻辑无关的事情,对于项目中用到的构建工具、代码检查功能等还需要一遍一遍地重复配置。为此我们选择能够创建脚手架的工具,来帮助搭建一个项目的框架,并进行一些项目所依赖的初始配置。

简介

Vue CLI是一个基于vue.js进行快速开发的完整系统,在vue3发布之前,Vue CLI将包名由原来的vue-cli改成了@vue/cli。

Vue CLI有三个组件。

  1. CLI(@vue/cli)

全局安装的npm包,提供了终端里的vue命令(如vue create、vue serve、vue ui等)。它提供了通过vue create快速搭建新项目的能力,或者通过vue serve即时原型化新想法的能力。我们还可以通过vue ui使用图形用户界面管理项目。

  1. CLI服务(@vue/cli-service)

CLI服务是一个开发环境依赖。它是一个npm包,本地安装到@vue/cli创建的每个项目中,CLI服务是构建于webpack和webpack-dev-server之上的,包含:

  • 加载其他CLI插件的核心服务;
  • 一个为绝大部分应用优化过的内部webpack配置;
  • 项目内部的vue-cli-service命令,包含基本的serve、build、inspect命令。
  1. CLI插件

CLI插件是给Vue项目提供可选功能的npm包(如Babel/TypeScript转译、ESLint集成、单元测试和端到端的测试等)。Vue CLI插件的名字以@vue/cli-plugin-(用于内置插件)或vue-cli-plugin-(用于社区插件)开头。当在项目内部运行vue-cli-service命令时,它会自动解析并加载项目的package.json文件中列出的所有CLI插件。

安装

npm install -g @vue/cli  //全局安装

创建项目

创建项目有两种方式:一种是通过vue create<项目名>命令,以命令行方式创建一个项目;另一种是通过vueui命令启动图形界面创建项目。

vue create

选择好项目存放的目录,命令行输入vue create helloworld,创建一个helloworld项目。项目名中不能有大写字母。

输入完会出现preset让你选择,第三个是手动配置项目,选择第二个vue3版本的:

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

根据配置下载完包之后再输入

D:\Vue项目>cd hellozzd
D:\Vue项目\hellozzd>npm run serve

打开chrome浏览器,输入http://localhost:8080/,即可看到脚手架默认页面。

使用图形页面

命令行输入vue ui,会在浏览器打开vue项目的图形界面管理程序。在这个管理程序中可以创建新项目、管理项目、配置插件和项目依赖、对项目进行基础设置以及执行任务。

项目结构

node_modules        //项目依赖的模块
public              //该目录下的文件不会被webpack编译压缩处理,引用的第三方库的js文件可以放这里
    favicon.ico     //图标文件
	index.html      //项目的主页面
src                 //项目代码的主目录
	assets          //存放项目的静态资源
    	logo.png    //logo图片
	components      //编写的组件放在这个目录下
    	HelloWorld.vue //Vue CLI创建的HelloWorld组件
	App.vue         //项目的根组件
	main.js         //程序入口js文件,加载各种公共组件和所需要用到的插件
.browserslistrc     //配置项目目标浏览器的范围
.eslintrc.js        //ESLint使用的配置文件
.gitignore          //配置在git提交项目代码时忽略哪些文件或文件夹
babel.config.js     //Babel使用的配置文件
package.json        //npm的配置文件,其中设定了脚本和项目依赖的库
package-lock.json   //用于锁定项目实际安装的各个npm包的具体来源和版本号
README.md           //项目说明文件

下面看几个关键文件的代码。

App.vue:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</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>

这是一个典型的单文件组件,在一个文件中包含了组件代码、模板代码和CSS样式。在这个组件中引入了HelloWorld组件,然后在template元素中使用它,使用export语句将APP组件作为模块的默认值导出。

App组件是项目的主组件,如果保留它就是修改代码中的导入语句,将其替换为导入的组件即可。

main.js是程序入口JavaScript文件,该文件主要用于加载各种公共组件和项目用到的各种插件,并创建vue的根实例:

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount('#app');

在该文件中,使用import语句按需导入createApp,这就是Vue3引入的Tree-shaking支持。不同于在HTML文件中的引用方式,前面是通过script元素引入vue的js文件。后面基于脚手架项目的开发,对模块的引入都会采用这种方式。

接下来使用import语句导入App组件,调用createApp方法创建应用实例,调用mount方法挂载。

index.html:

<!DOCTYPE html>
<html lang="">
  <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><%= htmlWebpackPlugin.options.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>

编写一个Hello组件

打开刚才创建的脚手架项目,在components目录下新建Hello.vue单文件组件。

<template>
    <p>{{message}}</p>
</template>

<script>
export default {
    data() {
        return {
            message:'Hello,Vue.js'
        }
    }
}
</script>

打开App.vue,将HelloWorld组价替换为Hello组件:

<template>
  <Hello />
</template>

<script>
import Hello from '@/components/Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  }
}
</script>

导入语句中的@符号表示src目录,用于简化路径的访问。

在VSCode中选择终端-新终端,输入npm run serve运行项目。地址栏打开http://localhost:8080/。

package.json

这是一个JSON格式的npm配置文件,定义了项目所需要的各种模块,以及项目的配置信息(如名称、版本、许可证等元数据,在项目开发中经常会需要修改该文件的配置内容)。

{
  "name": "hellozzd",
  "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": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

在使用npm安装依赖的模块时,可以根据模块是否需要在生产环境中使用而选择附加-S(即--save,生产环境)或-D(即--save-dev,开发环境)参数。例如,项目中使用了界面UI组件库element-ui,它肯定是在生产环境中用到的,就可以执行下面命令安装。

npm install element-ui -S

安装后会在dependencies中写入依赖项,在项目打包发布时,写入的依赖项会一起打包。

如果某个模块只是在开发环境中使用,则可用-D安装,会将依赖项写入devDependencies,不会一起打包。

在发布代码时,node_module文件夹不会发布,那么下载了别人的代码后可以在项目根路径下执行npm install命令,,该命令会根据package.json文件下载需要的依赖。

posted @ 2021-08-28 22:00  KKKyrie  阅读(145)  评论(0编辑  收藏  举报