• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程02:创建一个新项目

    vue开发教程02:创建一个新项目

    作者: 分类:vue开发 点击: 190 次
    wordpress CMS主题:ssmay主题

      我们安装好了vue.js框架,接下来就可以通过vue来开发项目了。本章我们就通过vue来创建一个新项目。

      一:在e盘创建一个vue文件夹。

      我这里是选择在e盘,你可以根据的需求选择其它盘。我们可以直接进入e盘右键来创建vue文件夹,也可以在dos命令行工具中来创建,命令如下:

      mkdir vue

      二:创建一个webpack新项目。

      1:dos下进入vue目录:

      cd  vue

      2:在vue目录下创建demo01项目:

      vue init webpack  demo01

      执行上面的命令后,会有不断地提示,如下图:

      vue开发教程02:创建一个新项目

      大部分我们直接按enter键即可,但这里有一个ESLint选项,如上图飘红处,这是对编码进行较验的意思,如果选择yes,就会在我们编写vue代码时,会对我们编写的代码进行每行较验,不符合ESLint要求的,就会提示错误,这会影响我们编写的效率,所以,建议NO,不安装它。

      通过上面2步,我们就成功创建一个新的项目demo01。webpack项目创建完成后,我们可以看一下demo01项目的目录结构(如下图):

      vue开发教程02:创建一个新项目

      3:启动项目:

      命令行中输入如下命令:

      cd demo01  //进入demo01目录

      npm run dev //启动

      这时就会启动这个demo01项目,如果出现如下代码,表示启动成功:

      vue开发教程02:创建一个新项目

      一般情况下,会在系统默认的浏览器中打开这个demo01项目,如下图:

      vue开发教程02:创建一个新项目

      但是,不知为啥,在我创建webpack项目后,执行这个命令后,却不能直接找开默认浏览器,也不知什么原因。这时,我们可以打开浏览器,输入 http://localhost:8080就可以打开这个项目。

      三:创建一个webpack-simple项目。

      webpack-simple是一个简化了的webpack项目,没有webpack功能强大,在实际测试中,不能直接通过 npm run build 来进行编译项目,具体原因不太清楚。

      1:创建新项目:

      vue init webpack-simple demo02  //创建项目时,不会下载依赖包

      执行完成后,命令行提示如下:

      vue开发教程02:创建一个新项目

      提示我们要进入demo02目录,再执行 npm install命令安装依赖。

      2:下载依赖包:

      cd  demo02  //进入项目目录

      npm install //下载依赖包

      通过上面2步,我们创建了新项目demo02,项目目录结构如下:

      vue开发教程02:创建一个新项目

      我们可以发现,webpack-simple项目目录结构比webpack项目目录结构少了很多,没有build、config、static目录。可见webpack-simple简化了不少。

      3:执行项目:

      npm run dev

      vue开发教程02:创建一个新项目

      这时会自动打开默认浏览器,并在默认浏览器中打开demo02项目初始界面。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809186934.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.