使用vue-cli脚手架初始化vue项目
最近新学了一下很火的vue.js,下面是我的利用所学的初始化一个简单vue项目。
vue-cli 是vue官方提供的一个脚手架工具,用于初始化一个Vue项目;
vue-cli的优势:
1、成熟的vue项目架构设计,而且会跟随vue版本的更迭而更新;
2、提供了一套本地测试服务器,而且是一个热加载的服务器;
3、提供了自己的一套集成打包上线的方案,webpack 或者gulpify在创建项目的时候可以进行选择;
有了以上优势,可以非常快速的搭建项目;
vue-cli对系统的要求:
vue-cli 是命令行的一个工具,系统需要
1、node.js(>=4.x)
2、能使用node的命令行终端;
第一步安装:node.js
首先去node官网下载LTS(长期支持稳定)版本,下载下来后,双击 一步一步安装即可;
然后测试安装是否OK,在电脑右下角的搜索框输入cmd回车,打开如下界面,在界面上输入 node --version ,如果出现版本号则安装成功。
安装Node的时候,Npm包管理工具也是一并安装的;
npm -v
第二步:安装Vue-cli
vue-cli脚手架最新版本是3,我们先学习稳定版2
全局安装命令:npm install -g vue-cli@2.9.6
执行后,慢慢等待吧,要搞一会呢;
等安装完后,vue -V
说明安装没问题
第三步:使用vue-cli脚手架来新建vue项目
进入你要保存vue项目的路径,在路径上面输入cmd回车直接进入命令行窗口
之后输入
命令:vue init webpack vue_demo2
一个简单的vue项目就下载在我所演示的F:\HBuilderProjects\Vue目录下
vue_demo2是项目名称,我们自己取名即可;
核心本质,是去github下载一个模版, https://github.com/vuejs-templates/webpack
通过脚手架可以设置名称,以及定制插件等
一些设置选项:
设置项目名称,项目描述,作者,以及选择构建模式,我们选运行+编译模式;
vue-router后面要用到,所以选用,
eslint代码验证用到讲到,所以选用,以及选标准模式;
我们不用单元测试,所以no,以及e2e测试 也是no
然后那个再选用NPM下载;
我们等待下载定制的模版吧;
等下载万完成后,
第四步:启动项目
直接在下载界面进入项目,cd vue_demo2,之后再输入 npm run dev启动项目。
出现如图所示说明项目启动成功,用它提示的地址直接在浏览器访问
这样就成功了。
好了以上就是下载和启动一个简单的vue项目的步骤了