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

发布时间:2019-05-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了实战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的话,需要输入,然后回车。

初始化完成的结果如下:

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

初始化项目结构

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

e:tutors>dir vue
 驱动器 E 中的卷是 文档
 卷的序列号是 B4A1-7185

 e:tutorsvue 的目录

2018@H_883_126@/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可以将该初始化项目运行在开发环境下。

运行结果如下:

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

章节回顾

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

思考

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

脚本宝典总结

以上是脚本宝典为你收集整理的实战Vue简易项目(1)初始化环境配置全部内容,希望文章能够帮你解决实战Vue简易项目(1)初始化环境配置所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。