Vue项目搭建及原理三

我每次写博客都要先在本地写一遍草稿，所以之前有些发布顺序可能会有一丢丢凌乱 哈哈哈，以后绝对改正，那下面我们就说一下创建及项目目录结构吧

三.创建项目

1.初始化Webpack

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 10.0px "Helvetica Light"; color: #2f2f2f }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 10.0px "Helvetica Light" }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "Helvetica Light" }
span.s1 { }
span.s2 { font: 10.5px "Noteworthy Light"; color: #2c3a42 }

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

比如:配置 Babel 来将 ES6 编译到 ES5 用于浏览器环境。类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后编译为JavaScript文件使浏览器可以识别。Less,sass等css预处理。

cd到工作目录中，

#  创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

2.安装依赖

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "Helvetica Light" }
span.s1 { }

$ cd my-project

$ npm install

3.启动服务

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 9.0px "Courier New" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "Helvetica Light" }
span.s1 { font: 10.0px "Helvetica Light" }
span.s2 { }

$ npm run dev

注：可以写自己的脚本启动服务，见项目实例。

项目目录结构如下：

build config 这两个目录是webpack以及node服务器的配置。

node_modules 这个目录是npm install命令执行后按照的依赖项所在目录。

src 是用来存放项目代码的，我们的编码也都是在这个目录里进行的。

.babelrc babel配置文件，把我们ES2105的代码通过它编译成ES5的。

.editorconfig编辑器配置。

.eslintignore 忽略语法检查的目录文件配置。

.eslintrc.jseslint的配置文件。

.gitignore配置Git仓库的忽略。

index.html项目入口模板文件

package.json node配置文件

下一节我们将介绍Vue-cli及Vue工作原理

本文章为作者原创文章，如有转载请说明出处

li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 12.0px Helvetica }
span.s1 { font: 10.5px "Trebuchet MS" }
ol.ol1 { list-style-type: cjk-ideographic }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 10.0px "Helvetica Light"; color: #ff2500 }
span.s1 { font: 12.0px Helvetica; color: #000000 }
span.s2 { }
ol.ol1 { list-style-type: decimal }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 10.0px "Helvetica Light"; color: #2f2f2f }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 10.0px "Helvetica Light" }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "Helvetica Light" }
span.s1 { }
span.s2 { font: 10.5px "Noteworthy Light"; color: #2c3a42 }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 10.5px Tahoma; color: #ff2500 }
span.s1 { font: 12.0px Helvetica; color: #000000 }
span.s2 { }
ol.ol1 { list-style-type: cjk-ideographic }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "Helvetica Light"; color: #2f2f2f }
span.s1 { font: 12.0px Helvetica; color: #000000 }
span.s2 { }
span.s3 { font: 12.0px Helvetica; color: #000000 }
ol.ol1 { list-style-type: decimal }