一起走进Vue.js——vue-cli脚手架

上期我们学习了 Vue.js 的实例方法和内置组件,这期我们来学习 Vue.js 的 vue-cli 脚手架。

使用 Vue.js 开发大型应用时,我们需要考虑代码目录结构、项目构建和部署、热加载、代码单元测试等事情,如果每个项目都要手动完成这些工作,那无疑效率低下,所以通常我们会使用一些脚手架工具来帮助完成这些事情。在Vue.js生态中我们可以使用 vue-cli 脚手架工具来快速构建项目。

一、安装 vue-cli

1、安装 vue-cli 的前提是我们安装了 npm(具体安装方法见Vue.js第一期),我们可在命令行工具里输入npm -v检测是否安装了 npm 以及版本。

2、确保 npm 安装后,接下来我们可以用 npm 命令安装 vue-cli ,在命令行输入:npm install vue-cli -g

3、安装好以后可以用vue -V来检测 vue-cli 的版本

二、初始化项目

我们用 vue init 命令来初始化项目:vue init

init:表示我们要用 vue-cli 初始化项目;

表示模板名称,vue-cli官网为我们提供了5种模板:

1、webpack:一个全面的 webpack+vue-loader 的模板,功能包括热加载、linting、检测和CSS扩展;

2、webpack-simple:一个简单 webpack+vue-loader 模板,不包含其他功能,可以快速的搭建 vue 的开发环境;

3、browserify:一个全面的 Browserify+vueify 模板,功能包括热加载、linting、单元测试;

4、browserify-simple:一个简单的 Browserify+vueify 模板,不包含其他功能,可以快速的搭建 vue 的开发环境;

5、simple:一个最简单的单页应用模板。

标识项目名称,这个可以根据自己的项目起名称。

目前在实际开发中,比较火的是 webpack 模板,我们也安装这个模板,需要在命令行中输入:vue init webpack vueCliTest

输入命令后,会询问我们几个选项,我们根据自己的需求填写就可以了。

● Project name:项目名称,如果不需要更改直接回车就可以了。(注意:这里不能使用大写,所以我们把名称给成 vueclitest )

● Project description:项目描述,默认为 A Vue.js project 直接回车,不用编写。

● Author:作者,如果你有配置 git 的作者,它会读取。

● Install vue-router?是否安装vue的路由插件,我们这里需要安装,选择Y

● Use ESLint to lint your code?是否用 ESLint 来限制你的代码错误和风格。我们这里输入n,如果是大型团队开发,最好进行配置。

● setup unit tests ?是否需要安装单元测试工具,我们这里不需要,输入n。

● Setup e2e tests with Nightwatch?是否安装 e2e 来进行用户行为模拟测试,我们这里不需要,输入n;

● Should we run ` npm install ` for you after the project has been created?是否在我们的项目创建后运行 npm install,它会有三个选项,我们选择第一个运行选项,然后回车。

接着我们用命令行的形式进入我们的 vueCliTest 项目目录中,然后在开发模式下运行我们的程序。

cd vueCliTest

npm run dev

然后进入 http://localhost:8080/#/ 页面

出现这个页面,说明我们的初始化已经成功。

注:1、如果我们在命令行输入 vue init webpack vueCliTest 没有出现接下来的内容或者报错,那说明我们的webpack没有安装成功,可能是以下三个原因:

● node 版本过低,升级为最新版本,然后重新安装;

● 权限问题,在Liux、Mac安装是需要权限,如果是Windows系统,要使用管理员身份安装;

2、如果我们执行 npm run dev 没有弹出 http://localhost:8080/#/ 页面,那可能是我们配置有问题,我们在项目目录里面找到 config 文件夹里面的 index.js 文件,找到 autoOpenBrowser ,将其 false 值改为 true,然后重新执行一遍打开页面的程序即可。

三、Vue-cli 的项目结构

补充:npm run build 命令

在命令行中输入 npm run build 命令后,vue-cli 会自动进行项目发布打包,在执行完 npm run build 命令后,在项目根目录生成了 dist 文件夹,这个文件夹里边就是我们要传到服务器上的文件。

dist 文件夹下目录包括:

● index.html 主页文件

● static 静态资源文件夹:里面是js、css和一些图片文件

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180513G01WPS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动