实战Vue简易项目（1）初始化环境配置

mindwind 发布于2019-08-23 10:30 / 2055人阅读

摘要：目前，我们还没有创建项目，进入预期项目目录的上一级文件目录下即可。使用脚手架初始化项目最后一个为项目名称，可以自定义其它名称。

本章以下命令都是在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:	utors>dir vue
 驱动器 E 中的卷是 文档
 卷的序列号是 B4A1-7185

 e:	utorsvue 的目录

2018/07/29  09:32              .
2018/07/29  09:32              ..
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              build  //生产、开发环境配置产出文件；
2018/07/29  09:31              config  // 生产、开发环境配置基础文件；
2018/07/29  09:31               265 index.html  //HTML模板；
2018/07/29  09:32              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              src  //项目源文件（开发所在）
2018/07/29  09:31              static  //我没用该文件...
               8 个文件        375,208 字节
               7 个目录 32,987,131,904 可用字节

运行项目

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

运行结果如下：

章节回顾

初始化项目所需要的依赖有哪些？

如何初始化项目？

如何运行项目，为什么可以这样简便的运行？

思考

如果使用CSS预处理，需要做什么，还是什么都不需要做就可以呢？

如果想在局域网其它端访问，需要做什么，还是什么都不需要做就可以呢？

云服务器专线服务 java项目配置环境简易php环境项目实战 python实战项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96398.html

实战Vue简易项目（2）定制开发环境

摘要：至于，为什么跟踪文件因为这个功能是开发环境下独有的，要修改开发环境吖，必然找开发环境的配置文件进行跟踪。测试可行性重启项目后，在浏览器中输入是你本地，可通过查看能够访问，就说明局域网内的其他端可以访问。然而，这样并没有结束。本章内容包含上一章思考的解决，还有一些其它的定制... CSS预处理关于对.vue文件模块处理规则的配置依次可在build/webpack.base.conf....

woshicixide 2019-08-23 10:33 评论0 收藏0
实战Vue简易项目（4）定义视图

摘要：是中的条件指令，根据返回的布尔值动态添加或移除元素。传值方式我是标题需要在中定义函数传的值为字符串，不需要前缀传的值为非字符串数字布尔值函数数组对象，为前缀，值为表达式计算结果在程序中，如引用的值。为该组件内，元素绑定的事件处理函数。视图包含内容#NavigationBar、#TabBar、#MainContext；为什么#NavigationBar、#TabBar分在Layou...

LeoHsiun 2019-08-23 10:40 评论0 收藏0
实战Vue简易项目（3）需求分析

摘要：页面布局页面整体布局分上中下上下部门导航栏，每个页面所共有页面的主体，随内容可滚动栏，页面可选，有的有，有的无可分离组件日期组件审批流组件列表组件可分离的工具库申请单类型事假病假年假对应数据类型应该为，需要一个转换为对应的方法申请单状页面布局 showImg(https://segmentfault.com/img/bVbeCjT?w=663&h=451); App页面整体布局分...

CompileYouth 2019-08-23 10:35 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首发博客: 我的博客项目源码: 源码项目预览: 预览因为个人的喜好和工作的需要,一直...

BoYang 2019-08-29 12:41 评论0 收藏0
学习不一样的vue实战(1): 环境搭建

摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首发博客: 我的博客项目源码: 源码项目预览: 预览因为个人的喜好和工作的需要,一直...

Atom 2019-08-20 16:59 评论0 收藏0