Vue.js+Node+Webpack（一)构建一个项目

构建一个项目

1.创建项目

打开cmd命令，进入你需要创建项目的目录下，比如：我要在d盘的project下创建一个名为mydemo的项目

D:\project>vue init webpack mydemo

之后一大串，项目名称，作者，是否build,是否使用代码规范等等一系列，宝宝是一直entry下去的。

微信截图_20181227161544.png

然后它会提示三个命令：

cd mydemo  //进入你所在项目
npm install //安装依赖包
npm run dev //运行项目

2.安装依赖包

你的文件夹有以下基本文件夹：build,config,src,static。
生成的项目无法直接运行，不然会报错，项目本身依赖很多包模块，你需要安装。

打开cmd进入你的项目目录下：

D:\project\mydemo>npm install

这个过程会很久。

完成之后，项目下会多出一个node_modules文件夹，这就是我们项目所需的依赖包。

3.运行项目

打开cmd进入你的项目目录下:

D:\project\mydemo>npm run dev

会提示项目运行地址：http://localhost:8080

浏览器进入地址，你会看到vue图标，说明项目运行成功。

用cmd命令行很麻烦，如果编码软件支持，可以直接用编码软件直接打开终端运行，较为方便。

这个时候，我就去看官方文档去了，了解一下：

• 构建一个Vue实例，实例的生命周期
• 模板语法
• 指令：v-if,v-show,v-for,v-bind,v-on,v-model
• 数据的处理如何与指令或模板结合
• class/style的绑定
• 组件
• 单页与多页
• 路由
• 组件注册，通信

目录

微信截图_20181227161544.png

1、配置文件

• webpack.base.conf.js

基础的环境配置，可以说是各个环境（包括开发环境，生产环境，测试环境）都需要的配置，公用配置部分。
包含，编译入口，输出路径和命名规则，省略拓展名，配置很长的相对路径的别名，loader配置不同模块的处理规则

• webpack.dev.conf.js

webpack开发环境的核心配置文件，系统配置文件。
当npm run dev时，运行的就是此文件。
包含，插件

• webpack.prod.conf.js

webpack生产环境的核心配置文件，系统配置文件。
当npm run build时，运行的就是此文件。
包含，打包，

• config/index.js

全局配置文件。
包含，，是否使用代码规范，项目入口，端口，服务器代理，
前后台分离时必须部署配置此文件

2、dist文件夹

build后出现的打包文件夹

3、src

应当包含以下文件（单页为例）

• assets //图片css
• css
• img
• common //共用js和api
• components //组件
• router
• index.js //路由配置
• app.vue //.vue入口
• index.js //js入口，相当于（main.js）
• package.json

用来管理本地安装 npm 包的唯一文件。它描述了当前项目依赖的包的列表，包含项目依赖包的版本，便于项目管理和移植

4、gitignore

忽略文件

• .DS_Store
• node_modules/
• /dist/
• npm-debug.log*
• yarn-debug.log*
• yarn-error.log*
• /test/unit/coverage/
• /test/e2e/reports/
• selenium-debug.log
• .idea
• .vscode
• *.suo
• .ntvs
• *.njsproj
• *.sln

部分转载来自https://segmentfault.com/a/1190000016886928