Project description (A Vue.js project)项目描述,也可以直接回车跳过
Author (xxxxx)作者名称
Runtime + Compiler: recommended for most users 运行加编译(推荐选项)
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时
选择运行时编译的原因,可以翻回官网文档: https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时
- 开始之前
相信大家在vue官网上(https://cn.vuejs.org/ )学习完vue的一些基础教程后,都蠢蠢欲动想要开始做点什么了吧,正如官网所说,前提是已经了解过vue的基础语法,核心思想,vue-loader,vue-router等基础知识之后我们再开始使用脚手架vue-cli,这样会有更好的体验和成长,毕竟不能一口吃成胖子嘛。在我们开始构建自己的Vue应用时使用vue-cli脚手架是很有必要的,因为vue-cli中已经为我们准备了大部分我们会用到的工具,我们可以选择不同类型的脚手架快速构建不同的应用。
- 别废话,我只想来点实际的
首先我们得安装npm来下载vue-cli,还没下载npm的朋友最好下载nodeJs吧,安装包里包含了npm。 nodeJ下载地址:https://nodejs.org/zh-cn/
接着进入正题,打开cmd命令行,全局下载vue-cli,输入:
npm install --global vue-cli
安装完成后,切换到自己的项目路径,开始初始化基于vue-cli的项目。 首先我们输入
vue list
后可以看到vue-cli为我们创建项目提供了多个模板,其中有webpack完整版简易版, browserify完整版简易版,pwa渐进式web框架和单纯的vue配置模板:我们以webpack为例,输入:
vue init webpack myproject
myproject 项目名字自己取,接下来是安装流程:
Project name (myproject)
括号中是默认选项,你可以修改也可以直接回车确认Project description (A Vue.js project)
项目描述,也可以直接回车跳过Author (xxxxx)
作者名称Runtime + Compiler: recommended for most users
运行加编译(推荐选项)Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅运行时 选择运行时编译的原因,可以翻回官网文档: https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时Install vue-router? (Y/n)
是否安装vue-route,建议选择Y,vue路由大多情况下都会使用上,特别是构建单页面应用的时候。Use ESLint to lint your code? (Y/n)
是否使用ESlint来管理你的代码风格,建议选择Y,养成良好的代码风格很重要,至于选择哪种风格因人而异(Standard,AirBNB,none),我一般使用Standard标准。Setup unit tests with Karma + Mocha? (Y/n)
是否安装单元测试,YSetup e2e tests with Nightwatch?(Y/n)
是否安装e2e测试,Y安装完成,接下来按照提示所说的指令输入,即可完成构建。
进入我的项目
cd myproject
安装所有的依赖模块,这个过程相当漫长,因为npm是国外服务器,我们可以选择使用国内npm镜像资源,例如淘宝的,参考文章:http://riny.net/2014/cnpm/
npm install
构建完成后,我们可以去run一下,看一下运行后的效果:
npm run dev
此时会弹出我们项目页面:
现在我们就可以进行项目开发啦,开发过程中页面会实时进行渲染更新。
当我们需要打包项目的时候,可以输入:
npm run build
打包完成后,目录中会生成一个dist文件夹,这个就是我们最后的项目输出成品啦。