vuejs笔记之搭建vue脚手架(vue-cli)

责编:menVScode 2017-10-11 23:11 阅读(1268)

        使用v-cli的优势:成熟的vue项目架构设计、本地测试服务器、集成打包上线方案。

        使用v-cli的系统要求:node.js (>=4.x)、Git、一个能使用node的命令行终端。

        具体步骤:

QQ截图20180130135937

        1、安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功。

QQ截图20171011214531

        

        2、安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。

QQ截图20171011214742


        3、在命令行工具中输入:vue init webpack,结果如下图,注意webpack不需要单独安装:

QQ截图20171011215819


        4、安装项目依赖:npm install,因为自动构建过程中已存在package.json文件,所以这里直接安装依赖就行。坑一点的话,可能会安装很久。

        脚手架初步搭建成功,对应的也会生成相应的文件。

QQ截图20171011221656


        5、启动项目,输入:npm run dev 或者 npm start。服务启动成功后浏览器会默认打开一个页面。


QQ截图20171020215937


标签: vue-cli vuejs
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码