前端技术交流群:565733884

[Vue教程]认识vue-cli脚手架工具

Vue教程 码云 55℃ 0评论

今天带领大家认识一下vue-cli(Vue脚手架)这个工程化工具,本章内容我们要学习几个主要内容:

  • 快速创建工程的两种方法
  • 工程化项目目录

打开终端工具,用命令node -v看一下你的node版本和命令npm -v 看一下npm版本是否一致,或者说node版本高于8的,npm版本高于6的。

node版本和npm版本查看方法

然后怎么样全局安装vue-cli工具呢?用命令

npm install -g @vue/cli

这里我再插入一句,我之前一直用的vue-cli版本是2.9.6的,所以在升级到vue3.0的时候踩了点坑,为了避免大家和我一样踩不必要的坑,我从vue2.0s升级升级到vue3.0的方法写一下,希望对大家有个帮助,第一次成功安装的就可忽略过,这个方法只针对想要升级到vue3.0的小伙伴。

1、卸载之前安装的vue-cli

npm uninstall vue-cli -g

2、然后安装新的vue-cli

npm install -g @vue/cli

但是呢,有的小伙伴会发现操作了没用,卸载重装,然后创建时照样是之前的旧版本,这是怎么回事呢?我反反复复试了好多次,终于发现问题的根源。
把vue-cli安装在npm的全局模块的存放路径的默认路径下,即: “C:\Users\Administrator\AppData\Roaming\npm”,但是安装之后把默认路径改了,然后一直在新的路径下卸载新增。
解决方法:
先将路径改为默认路径,卸载之后再改回来,如图:

vue-cli升级最新版本方法

我们怎么创建vue工程呢?很简单首先你要进入要创建工程的目录里去,用命令cd 目录名,比如这里是我在本地创建的:

cd demo

然后使用命令:

vue create hello-world

这里强调一下,创建项目名是可以使用短横线“-”或者是下划线连接的小写字母创建。

然后回车就会出现一些cli工具的选项,按键盘上下键选择默认(default)还是手动(Manually), 如果说使用default模式的话,一路回车执行下去就行了, 它就会给大家创建一个默认选项的一个工程,(注:现在vue-cli3.0默认使用yarn下载),这里我选择手动是为了给大家演示。

cli工具手动选择配置项方法

回车,大家就会发现有很多选项,新手可能会有点蒙圈,这改如何选择呢?不用担心,这里我会一一给大家详细解释一下它们代表的意思。

cli手动选择配置项目录

你要集成什么就选就行了,我这里选个我比较常用的(注:空格键是选中与取消,A键是全选)。

我们把常用的几个组件安装一下,比如路由组件Router,状态控制Vuex组件,CSS预编译组件CSS Pre-processors,Linter / Formatter规范类型,或者Unit测试方式,E2E测试方式。

我的安装方式:

cli组件安装方式

回车,它问是否使用历史?我们选择yes

是否使用历史

选择css预处理,我们选择sass,回车

选择css预处理

ESLint代表我们平时写代码的时候,会有一些规则,让我们的代码写的更优美,我建议大家选择ESLint + Standard config或者ESLint + Airbnb config这样一个配置,我们先选ESLint + Airbnb config等会看一下它有什么作用

ESLint配置选择方法

这里在对我们js代码保存检测的时候有两个选择:Link on save表示是在保存的时候对我们的js代码做一个检查呢,还是说Link and fix on commit表示你是在提交一个更新的时候做一个检查。我们默认选择当我们保存的时候

保存的时候对代码进行检测

然后选择默认,是否要保存未来的项目,就是刚才选择的default或者是Manually,如果这里你选择yes,你今后创建的项目都会按照你刚刚手动选择配置去创建项目,如果说你不需要这样,你就选择no,我建议大家选择no。

是否保存未来项目

然后它就会按照我们刚才的选项配置去加在一些插件依赖,然后会形成我们需要的这个项目到我们create的hello-world中

按照我们刚才的选项配置去加在一些插件依赖

这个创建过程需要点时间,如果网络快的话,这个过程是很快的,同样,如果大家在这个地方安装比较慢的话,可以使用Ctrl+c取消它,然后cd到安装的这个hello-world目录,利用淘宝镜像cnpm安装。

项目创建成功

如上图我们的这个项目就安装成功了,使用下面两个命令就可以让我们的项目跑起来:

cd hello-world
npm run serve

首先使用cd hello-world进入我们的项目目录,然后使用npm run serve这样我们的项目就跑起来了:

helloworld项目运行

运行成功后,会提醒你你的项目已经运行到了localhost:8081这个端口。

项目运行在localhost

这样我们就创建成功一个vue工程了,我们在页面上看一下:

vue页面运行成功

这是第一种去使用vue create命令去新建vue工程化项目的一个方式,那么第二种方法呢就是使用vue ui这个命令,很简单,在你的终端工具使用这个命令。

vue ui
vue ui命令使用方式

然后我们粘贴这个localhost:8000到我们的浏览器中,大家就可以看到我们当前的工作目录在哪里。

vue项目管理器

选择“创建”创建一个新的项目,点击“在此创建新项目”

创建新项目

我们选择项目的名称为hello-ui,然后选择包管理器,比如说我们选择npm,其他的作为默认的配置项,保存一下。

hello-ui新项目创建方式

然后下一步,这个呢和我们使用命令vue create一样,我教大家使用手动的方式配置项目。

手动配置项目

下一步,我们看一下cli为大家添加了那些配置工具或者说有哪些可选的配置工具,比如我们要用到路由组件、状态管理组件vuex、css预编译组件,推荐大家把这个“
使用配置文件”选项勾选,这样的话前面的配置项就会形成单独的文件里面去。

cli配置工具选项

下一步,选择预编译器sass,然后ESlint配置文件选择默认的或标准的这个配置文件,点击创建项目。

cli创建项目完成

点击创建项目后会出现一个保存为新预设,这个表示我们刚才的这个配置它会保存为一个预设的名字,到我们后来创建项目的时候可以使用这个预设快速的创建我们的工程化项目。

保存为新预设

我们给它命名为vuex+router,保存预设并创建项目。这个过程它其实得到了项目的文件目录和文件名,和我们前面使用vue create命令行工具的操作得到的项目是一样的。

当项目创建成功之后,我们会得到这样一个页面。

vue-ui项目首页

大家可以在页面左边菜单栏看到我们刚刚配置的一些插件、依赖等信息

插件依赖详细信息菜单

打开我们刚才用命令行和UI工具形成的这个目录,有public文件夹和src文件夹这样的一个文件夹,src里面放的是源文件,public里面就是一些公共文件公共资源,node_modules是我们的前端依赖。

vue项目目录介绍

index文件是我们的项目入口,里面有一个id为app的div:

<body>
    <noscript>
      <strong>We're sorry but hello-ui 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>

在main.js中,把vue对象或者是实例绑定到app上面来,而且它还加载了这么几个文件,router我们在前面选择组件的时候选择一个router和vuex组件,store就是vuex组件,它其实是帮助我们管理组件之间的一个状态。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

views文件夹相当于页面上的视图,里面有home、about两个文件。

项目是怎么运行起来的呢?这里有一个package.json文件,它相当于是对整个项目解释说明的一个文件,包含项目名称,版本号,然后它里面一些打包使用的依赖,开发所使用的一些依赖,以及它们对应的版本,在这个文件里写的都特别清楚。特别注意这里面有个scripts,这个是我们开发使用到的一些命令,比如说我们npm run serve相当于把项目运行起来了,还有npm run build这个命令,都是用npm run加上中间这个关键词serve、build来运行起来的。

{
  "name": "hello-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.21"
  }
}

这里带大家简单的认识一下,后面我还会具体介绍,这里大家需要记住有这么几个关键目录,public目录,src目录,还有就是package.json文件。其他的文件都是些配置性的文件大家做个了解即可。

总结

通过本章大家要掌握快速创建工程的两种方法,vue create命令,UI界面去创建我们的工程,然后就是它创建的这个工程的目录结构,重点就是组件目录以及package.json文件。

转载请注明:码云笔记 » [Vue教程]认识vue-cli脚手架工具

喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 不错,学习了博主
    刘庆新2019-02-15 11:37 回复