网站首页 » 前端开发 » Vue » Vue2 脚手架(vue-cli)安装及详解
上一篇:
下一篇:

Vue2 脚手架(vue-cli)安装及详解

生命不停,更新不止。虽说快过年了,但学习还是必须坚持的,之前一段时间比较粗略地学习了下 Angular ,但由于战略有调整,所以现在把研究 Angular 的时候转到了 Vue 身上,我不敢说在 Angular 和 Vue 中,哪一个前端框架比较好,毕竟我对 Angular 也不是很熟悉,至于 Vue 正如你看到的,我才刚刚开始学。所以这个好与不好,只能自己试过了知道,存在即是合理,所以我们在把这两者放在一起来作对比估计也很难得出个结果,但我相信,它们肯定都会有自己的公住优缺点,就看哪一个比较适合你自己。好了,下面进入本文的主要内容,Vue 脚手架(vue-cli)。

首先,你得有一个安装 Vue 脚手架的环境,所以我们来看看要安装 Vue 脚手架,我们需要cmd、node.js、npm。

cmd 不用多说,Ctrl + R 弹出。node 和 npm 可以一起安装,在你安装 node.js 的时候 node.js 也自动也带上了 npm。所以你只需要安装 node.js  就可以。

node.js 的安装非常地简单,官网下载,双击安装就可以。如果你是 window 10 (现在基本都是)那么你可以看看这篇文章《window 10 下安装nodejs及npm》。

Node.js 安装完后,你就可以 Ctrl + R 打开 CMD 窗口了。

安装 veu-cli 也非常地简单,就那么几行命令,官方也已经给出,我在这里就偷个懒,直接粘贴过来,并稍作了解释。

懒到没朋友
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
# 安装所需模块
$ npm install
# 启动
$ npm run dev

第一个命令行的 –global 可以简写成 -g。第二行命令行的 my-project 就是你的项目名,你可以自行修改。

执行第二个命令行时,你需要输入参数和作出一些选择(y or n)。当你到了下面这一步时

选一个吧
Runtime + Compiler: recommended for most users

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
ML) are ONLY allowed in .vue files - render functions are required elsewhere

直接回车就行。后面的你可以根据自己的需要选择 y 或者 n 回安装,现在不装,后面有需要的时候再安装也是可以的。比如:Eslint、unit tests、e2e tests

  • eslint 是一个代码语法规范检查的工具,不同意就不会把检查语法规范的功能加进webpack编译的流程里
  • unit tests:单元测试
  • e2e tests:端到端测试

安装完之后,你就可以运行最后那一行代码启动这个服务了。成功启动后你会看到一行形如下面的提示:

访问地址

Your application is running here: http://localhost:8080

以前的版本在启动完服务后就自动在浏览器中打开,便现在新版设置成默认不自动打开。但我也也可以自己设置一直,服务启动时自动在浏览器中打开。你还可以设置默认的端口号。

找到我们刚才新建的项目 yunkus 。在 config 文件夹里有一个 index.js 文件,修改相应的代码就可以了:

随意改
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,

端口号改成你喜欢的,把 false 设置成 true 自动在浏览器中打开了。

安装完成后,项目目录下除了 src 目录,其它目录或文件,你可以暂时不用管它。src 目录才是你真正的主战场。src 目录下会有如下文件:

  • assets:存放一些静态资源,比如:图片
  • components:组件文件存放目录
  • router:路由文件存放目录
  • App.vue:根组件
  • main.js:主入口文件

现在你就可以开始你的开发之旅了。至于 Vue 组件怎么写,这个你就得自己去研究了,你可以先看看那个组件示例是怎么写的:

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>

Vue 组件的写法其实就可以简称为“三合一”,样式、html 和 JavaScript 代码放在同一个文件里组成一个组件文件。

下面帖出一个收藏了很多有关 vue 的好东西的链接:https://github.com/vuejs/awesome-vue

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-cli/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END