脚本宝典收集整理的这篇文章主要介绍了

实战Vue简易项目(1)初始化环境配置

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

本章以下命令都是cmd命令行中进行的。

安装命令行

npm i -g vue-cli

安装完成后,输入vue -V返回版本号,即安装成功;

初始化项目

切换到项目目录下

项目目录,即项目所在目录。

目前,我们还没有创建项目,进入 预期项目目录 的上一级文件目录下即可。

本文以个人电脑目录演习cd /d e:/tutors/,请自动对应自己的学习所用路径。

使用脚手架初始化项目

vue init webpack vue最后一个vue为项目名称,可以自定义其它名称:vue init webpack aaa

初始化过程会为您定制初始化环境,以下是我的定制:

? Project name vue  //项目名称 ? Project description A Vue.js project //项目描述 ? Author //作者 ? Vue build standalone ? Install vue-router? Yes  //是否需要vue-router ? Use ESLint to lint your code? No  //是否需要ESLint进行代码风格检测 ? Set up unit tests No  //是否需要单元测试 ? Setup e2e tests with Nightwatch? No  //是否需要端到端测试; ? Should we run `npm install` for you after the project has been created? (recommended) npm  //选择安装项目依赖的工具

操作都是yes || no,然后回车。
当然,默认选择yes,不必输入,直接回车。
选择no的话,需要输入,然后回车。

初始化完成的结果如下:

初始化结果

初始化项目结构

dir vue查看初始化项目目录结构:

e:tutors>dir vue  驱动器 E 中的卷是 文档  卷的序列号是 B4A1-7185   e:tutorsvue 的目录  2018/07/29  09:32    <DIR>          . 2018/07/29  09:32    <DIR>          .. 2018/07/29  09:31               230 .babelrc  //babel配置文件 2018/07/29  09:31               147 .editorconfig  //编辑器配置文件 2018/07/29  09:31               154 .gitignore  //Git管理忽略文件配置 2018/07/29  09:31               246 .postcssrc.js  //postcss配置文件 2018/07/29  09:31    <DIR>          build  //生产、开发环境配置产出文件; 2018/07/29  09:31    <DIR>          config  // 生产、开发环境配置基础文件; 2018/07/29  09:31               265 index.html  //HTML模板; 2018/07/29  09:32    <DIR>          node_modules  //NPM依赖包; 2018/07/29  09:32           371,973 package-lock.json  //项目依赖版本等信息文件 2018/07/29  09:31             1,733 package.json  //项目依赖配置文件; 2018/07/29  09:31               460 README.md  //Markdown说明文档; 2018/07/29  09:31    <DIR>          src  //项目源文件(开发所在) 2018/07/29  09:31    <DIR>          static  //我没用该文件...                8 个文件        375,208 字节                7 个目录 32,987,131,904 可用字节

运行项目

cd vue切换到自己的项目目录下,npm run dev可以将该初始化项目运行在开发环境下。

运行结果如下:

运行结果

章节回顾

  • 初始化项目所需要的依赖有哪些?
  • 如何初始化项目?
  • 如何运行项目,为什么可以这样简便的运行?

思考

  • 如果使用CSS预处理,需要做什么,还是什么都不需要做就可以呢?
  • 如果想在局域网其它端访问,需要做什么,还是什么都不需要做就可以呢?

总结

以上是脚本宝典为你收集整理的

实战Vue简易项目(1)初始化环境配置

全部内容,希望文章能够帮你解决

实战Vue简易项目(1)初始化环境配置

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过