vue-cli构建vue项目的步骤详解


Posted in Javascript onJanuary 27, 2019

构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置 webpack 配置文件的基本内容,大大降低了初学者构建项目的难度。这节我们看看如何使用 vue-cli 构建 vue 项目以及对构建项目的具体分析。

一、环境搭建

nodenpm 是必不可少的,这里不再介绍。

1、安装 vue-cli

$ npm install -g vue-cli

检查是否安装成功:

$ vue --version
3.3.0

<!-- more -->

2、构建项目

$ vue init webpack hello-vue

初始化的过程中,会有一个交互式的选项让你选择项目的一些配置,根据项目需求选择即可。为了方便后面几篇教程的演示,可以统一选择以下选项:

? Project name hello-vue # 项目名称
? Project description A Vue.js project # 项目描述
? Author Deepspace <cxin1427@gmail.com> # 作者
? Vue build standalone # 运行+编译时
? Install vue-router? Yes # 安装 vue-router
? Use ESLint to lint your code? Yes # 使用 ESLint 作为代码规范
? Pick an ESLint preset Airbnb # 选择 Airbnb 的代码规范
? Set up unit tests Yes # 安装单元测试
? Pick a test runner karma # 测试模块
? Setup e2e tests with Nightwatch? Yes # 安装 e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,npm

构建完成之后,会提示构建成功信息:

# Project initialization finished!
# ========================

To get started:

 cd hello-vue
 npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

3、启动项目

$ cd hello-vue
$ npm run dev

项目默认会在 8080 端口启动,如果端口有占用,会自动调整端口。打开浏览器输入:http://localhost:8080,会看到构建的项目的主页:

vue-cli构建vue项目的步骤详解

4、目录结构

使用编辑器打开(推荐使用 VSCode),下面具体看看目录结构:

package.json :

{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  }
}

package.json 中,根据我们在构建项目的时候的选项,有以下几个命令。

  • npm run dev :项目开发阶段,项目启动的命令;
  • npm run lint :使用 eslint 检查代码格式;
  • npm run test:单元测试和 e2e 测试;
  • npm run e2e : e2e 测试;
  • npm run build:开发完成后执行,会把我们的源代码编译成最终的发布代码,生成在项目根目录中的 dist 文件夹下(初始化项目时不会生成)。

config: 保存一些项目初始化配置。

build :里面保存一些 webpack 的初始化配置。

index.html : 是我们的首页。index 很多时候都被预设为首页,像 index.htmindex.php 等。

src : 保存项目源代码的地方,我们下面会详细分析该文件夹里的文件。

二、代码分析

Vue 的核心架构分为两个部分:路由和组件,其实 React 也是一样的。我们在切入一个项目的时候,都是从这两个点出发。下面我们具体看看 src 文件夹。

1、入口文件

如果我们打开项目根目录下 build 目录中的 webpack.base.conf.js,会看到这样的代码(第22行):

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: './src/main.js'
 },
 // ...
}

说明我们的入口文件就是 src 目录下的 main.js 文件。看看代码:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>',
});

看看这里面做了什么事情:

  • 引入 vue 并起名叫作 Vue
  • 引入根目录下的 App.vue 文件(后缀名可不要)
  • 引入 router 文件下的 index.js 文件(文件夹后没有具体的文件,默认引入的就是 index.js 文件)
  • 通过 new 实例化 Vue 实例 ,实例化的时候声明了几个属性:
    • el:'#app':意思是将所有视图放在 id 值为 app 这个 dom 元素中,也就是项目根目录下的 index.html 中的那个 div : <div id="app"></div>
    • components: { App }:意思是将上面引入的 App.vue 文件的内容将以 <App/> 这样的标签写进 <div id="app"></div> 中;

在开始的时候,我们并没有介绍说 Vue 使用的是虚拟 DOM ,那么,从这里我们看出,Vue 使用的也是虚拟 DOM (和React是一样的)。

这里对虚拟 DOM 作下简单介绍:当我们修改应用程序时,不会对 DOM 进行更改,而是创建以 JavaScript 数据结构形式存在的 DOM 副本,然后插到文档当中。无论何时进行任何更改,都将对 JavaScript 数据结构进行更改,并将后者与原始数据结构进行比较(diff算法),然后将最终更改更新为真实 DOM。我们都知道 DOM 是非常重的,所以虚拟 DOM 是非常省性能的。

2、App.vue

通过入口文件中做的事情,我们其实已经知道 App.vue 的作用了:单页面应用的主组件。所有页面都是在 App.vue 下通过路由进行切换的。所以,我们可以理解为所有的路由(route)也是 App.vue 的子组件。我们看看代码:

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App',
};
</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>
这里需要提一下:node 之所以可以识别出 *·vue 格式的文件,是因为 webpack 在编译时将 *.vue 文件中的 htmljscss 都抽出来形成新的单独文件。可通过 npm run build 命令编译源代码,查看 dist 文件下的文件来验证。

App.vue 的内容分为三个部分:<template>...</template><script>...</script><style>...</style> ,分别在这三类标签里面写入结构、脚本、样式。

我们先从 <template> 看起:里面一个 div 包裹着 img 标签和 router-view 标签。前面提到过: App.vue 是单页面应用的主组件。对照着前面在浏览器中打开的应用主页面,img 标签就是页面上方的 Vuelogo。那下面的内容去哪了呢?和 <router-view/> 有关系吗?这就要去看路由了。

3、router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(Router);

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld,
  },
 ],
});

前面先引入了路由插件 vue-router,然后显式声明要用路由 Vue.use(Router) 。路由的配置非常地明了:给不同 path 分配不同的组件(或者页面),参数 name 只是用来识别。

当我访问根路由 http://localhost:8080/#/ 时,App.vue 中的 <router-view/> 就会把引入的 HelloWorld 组件分配给我,放在了 img 标签的下面,打开 components 目录下的 HelloWorld.vue 就可以看到具体内容了。

我们在看到浏览器中的 url 的时候会觉得奇怪,为什么在后面加了一个 # 号呢?这是因为 vue-router 默认 hash 模式 —— 使用 URLhash 来模拟一个完整的 URL,当 URL 改变时,页面不会重新加载。详见:https://router.vuejs.org/zh/guide/essentials/history-mode.html。这里可先跳过这点内容。

现在,我们在浏览器访问 http://localhost:8080/#/vue 这个地址,会发现只出现了 Vuelogo。这是因为我们并没有配置 /vue 这个路由,找不到路由,那<router-view/> 这个标签就不会加载出来。

到这里,我们就知道路由是如何根据 url 来分配不同的组件了。配置多个路由就很简单了:

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/about',
   name: 'about',
   component: About
  },
  {
   path: '/vue',
   name: 'vue',
   component: Vue
  }
 ]
})

那如果要访问 http://localhost:8080/#/vue/demo 怎么办呢?

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld,
  },
  {
   path: '/about',
   name: 'about',
   component: About,
  },
  {
   path: '/vue',
   name: 'vue',
   component: Vue,
   children: [
    {
     path: '/demo',
     component: demo,
    },
    {
     path: '/project',
     component: project,
    },
   ],
  },
 ],
});

给路由加多一个子路由配置即可。

4、assets

用来存放一些图片、样式等静态文件。

三、总结

vue-cli构建vue项目的步骤详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
详解vue-cli3使用
Aug 14 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 #Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 #Javascript
实例讲解JS中pop使用方法
Jan 27 #Javascript
Vue.js实现的购物车功能详解
Jan 27 #Javascript
JS温故而知新之变量提升和时间死区
Jan 27 #Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 #Javascript
命令行批量截图Node脚本示例代码
Jan 25 #Javascript
You might like
php smarty的预保留变量总结
2008/12/04 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
js读取cookie方法总结
2014/10/31 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
python列表使用实现名字管理系统
2019/01/30 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
临床护理求职信
2014/04/26 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
七年级数学教学反思
2016/02/17 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers