美文网首页程序员
使用vue新建项目(详解版)

使用vue新建项目(详解版)

作者: 莫莫利亚 | 来源:发表于2018-10-10 14:22 被阅读0次

    npm安装

    步骤一:安装nodejs

    打开网站:http://nodejs.cn/download/

    按照版本下载你需要的,这里以windows64安装程序为例子

    下载nodejs

    双击打开刚才下载的【node-v10.11.0-x64】,什么都不用犹豫一直下一步直到安装完成

    快捷键:【windows键+R】输入cmd,打开控制台

    查看node.js版本版本输入指令:【node -v】

    查看node.js版本

    查看npm版本输入指令:【npm -v】

    如果不是最新版本也可以执行命令进行更新:【npm install -g npm】

    npm版本

    使用淘宝npm镜像(国内使用官方的太慢了):

    【npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org】

    淘宝npm镜像

    步骤二:安装vue-cli

    全局安装 vue-cli:【cnpm install vue-cli -g】

    全局安装 vue-cli

    查看vue-cli是否成功:【vue list】(注意:此处检查vue-cli,是需要检查vue而不是vue-cli)

    查看vue

    在开始常见项目之前我们要先选择路径:【cd 路径】

    选择路径

    新建vue项目:【vue init webpack  项目名称】

    这里我输入的是:【vue init webpack vue-demo01】

    ? Project name     //这里再次输入你的项目名称,然后回车

    ? Project description (A Vue.js project)    //这里写你的项目描述,然后回车

    ? Author    //这是作者名称

    ? Vue build 打包方式,回车就好了

    填写完作者后回车,会显示这样的如下信息,不要迷茫直接回车

    ? Install vue-router? (Y/n)    是否安装vue-router,这是官方的路由,大多数情况下都使vue-router官网 。这里就输入“y”后回车即可。

    ? Use ESLint to lint your code? (Y/n)   是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作,新手就不用了,输入'n'后回车。

    ? Set up unit tests (Y/n)  设置单元测试,这里你可以选择n

    ? Setup e2e tests with Nightwatch? E2E测试,选择n

    这些完成后直接回车就好

    命令:cd project name    //cd 进入你刚才建立的项目名目录。

    切记一定要进入到你刚才创建项目的目录。

    cnpm install    // 初始化项目,安装依赖。

    项目构建完成,输入【npm run dev】运行项目,自动打开默认浏览器显示页面。

    在浏览器中输入:http://localhost:8080地址

    利用vue-cil搭建vue项目,我们会的得到一个初始化的文件结构

    完成了,希望你能够继续学习下去。

    相关文章

      网友评论

        本文标题:使用vue新建项目(详解版)

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