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

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

作者: 分类:vue开发 点击: 4,824 次

    我们安装好了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项目初始界面。

     



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

上一篇:
下一篇:

或许你会感兴趣的文章:

发表评论

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

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