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

构建一个 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,会看到构建的项目的主页:

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

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

三、总结

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

(0)

相关推荐

  • 详解vue-cli 构建Vue项目遇到的坑

    前言 使用Vue做管理系统和WebApp做过三四个项目了,期间遇到很多坑,再次一一列举,并给出解决方案,方便日后更方便使用,也为他人提供一些解决方案. 问题表象和解决方案 1.编译后js.css等相对路径和绝对路径. config/inde.js文件 build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirnam

  • 图文讲解用vue-cli脚手架创建vue项目步骤

    用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构.今天小编我便来记录一下vue-cli脚手架的构建项目的经验. 1.首先便是要搭建好vue-cli脚手架工具才行滴.搭建vue-cli脚手架工具的方法便是如图所示这样滴. 2.然后指定一个目录并用vue init webpack+项目名称便可得到前端项目的结构了哦. 3.接着便是一路回车来确认项目所用到的一些语法和测试包即可. 4.接着便可看到依赖包已经配置成功了.可以用cd来进入项目里边并执行npm run dev即可启动刚才初

  • vue-cli如何快速构建vue项目

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.安装vue-cli 使用npm全局安装vue-cli(前提是已经安装了nodejs,否则连npm都用不了) $ npm install -g vue-cli 2.创建自己的工作空间 $ vue init webpack vuetest 3.项目信息 命令输入后,会进入安装阶段,需要用户输入一些信息 Project name (vuetest) 项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • 详解使用vue-cli脚手架初始化Vue项目下的项目结构

    vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具 安装 下面来安装

  • 使用Vue-cli 3.0搭建Vue项目的方法

    1. 环境准备 1.1. 安装Node.js (建议使用LTS版本) 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls nrm查看npm源.png 切换npm源(以使用taobao为例) // 用法: nrm use *** nrm use taobao // 切换之后可用 nrm ls查看是否已经切换了npm源 nrm切换npm源.png 1.3.

  • springboot学习之构建简单项目搭建步骤详解

    概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这种情况下,springboot应运而生,他能够快速的构建spring项目,而且让项目正常运行起来的配置文件非常少,甚至只需要几个注解就可以运行整个项目. 总的说来,springboot项目可以打成jar包独立运行部署,因为它内嵌servlet容器,之前spring,springMvc需要的大量依赖,

  • vue cli构建的项目中请求代理与项目打包问题

    在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项

  • vue脚手架项目创建步骤详解

    vue脚手架 -> vue.cli 快速的创建一个大型的功能齐全的vue项目模板(初始化项目) 土味解释:快速的创建一个空的vue项目 安装(全局安装) 全局安装 > npm i @vue/cli -g 创建vue脚手架项目 > vue create 项目名 配置选项 Vue CLI v4.5.11 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Pr

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • vue cli安装使用less的教程详解

    vue-cli构建的项目默认是不支持less的,需要自己添加依赖 1.安装less和less-loader ,在项目目录下运行如下命令 npm install less less-loader --save-dev 2.安装成功后,打开build/webpack.base.conf.js ,在 module.exports = 的对象的module.rules 后面添加一段: module.exports = { // 此处省略无数行,已有的的其他的内容 module: { rules: [ /

  • vue实现新闻展示页的步骤详解

    需求 1.  做一个新闻展示页 2.  新闻分类可以自定义 3.  每类新闻的内容,样式不一样 4.  上拉加载新的数据 5.  点击进入详情页,再返回时,定位到原来的位置 图片展示 采用的技术 轮播图使用:swiper     zepto.js     vue.js     vue.resource.js     vue-router.js 滑动插件:iscroll.js 界面样式采用的   weui 设计的思路 因为使用了vue.js  每个分类的样式不一样,而且分类是可以配置的.所以呢,想

  • Vue安装浏览器开发工具的步骤详解

    开发vue时,浏览器有一个好的开发调试工具能让开发事半功倍,磨刀不误砍柴工. 步骤 1.下载工具 地址:  https://github.com/vuejs/vue-devtools 2.安装依赖 cmd进入vue-devtools文件夹,安装相关依赖,依次执行npm install,再执行npm run build. 3.修改配置 打开shells>chrome>src>manifest.json,修改"persistent":false为true. 4.浏览器安装

  • gitee命令行上传项目的步骤详解

    1.注册gitee账户 2.登录gitee新建个仓库,用来存放项目 3.找到需要上传的项目,右键,git bash here 这里需要先去官网下载安装git git官网 4.git init命令在当前文件夹下创建一个本地仓库 5.git remote add origin 远程仓库地址 6.对需要上传的项目添加追踪,git add .代表当前文件夹下的所有文件都添加追踪 git add "项目名" 单独给某个项目添加追踪 7.先提交到本地仓库 git commit -m "提

  • 使用IDEA创建java项目的步骤详解(hello word)

    前提:已安装好jdk,配置好环境变量.我使用的是java 8 首先在自己的D盘下建一个文件夹,用来存放我们待会新建的项目,我创建了IdeaProject: 1,第一步打开idea 2,第二步选择创建java项目,并选择自己的jdk(我自己本地已经配置了所以有),没有可以点击new去自己的安装目录下找,一般默认安装C:\Program Files\Java,然后选择next 下一步 3,第三步将"Create project from template"前面的勾去掉,然后点击"

  • 亲手教你IDEA2020.3创建Javaweb项目的步骤详解

    IDEA2020.3激活码 最新idea2020激活码超详细教程(设置插件仓库成功激活到2099年) 关于最新IDEA2020.2.1,2.2,3以上破解,激活失效,重新激活的问题 创建Javaweb项目 第一步:在当前Project下创建一个Java的Module 第二步:右键当前模块选择Add Frameworks Support勾中Web Application 第三步:点击Edit Configurations,点击+号选择Tomcat Server的Local然后再选择Deployme

随机推荐