美文网首页我爱编程
vue-cli 项目搭建(一)

vue-cli 项目搭建(一)

作者: 希硕 | 来源:发表于2018-06-08 20:00 被阅读0次

    vue-cli 简介

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli

    vue-cli 初始化

    1. 安装vue-cli

    直接全局安装 vue-cli(提前确保node.js已安装):
    npm install -g vue-cli
    如果安装比较慢,可以使用国内淘宝镜像安装,如何设置,自行百度。

    1. 生成项目

    首先需要在命令行中进入到项目目录,然后输入:
    vue init webpack Vue-Project
    其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
    Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

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

    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 with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha,我们这里不需要,所以输入n。
    Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我们这里不需要,所以输入n。


    image.png

    配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
    然后进入项目目录(cd Vue-Project),使用 npm 安装依赖
    npm install npm会自动下载并安装项目所依赖的包。
    npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。

    image.png

    出现这个页面说明项目启动成功

    相关文章

      网友评论

        本文标题:vue-cli 项目搭建(一)

        本文链接:https://www.haomeiwen.com/subject/iqtzsftx.html