Vue.js单页项目构建

Vue.js项目整合

1. 基础安装

1.1 安装 nodejs

1.2 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.3 安装 vue-cli

将 vue-cli（ vue 的脚手架）安装到全局

cnpm install -g vue-cli

2. 创建项目

2.1 项目初始化

打开 CMD 窗口，输入如下命令，其中 vue-demo 为项目名称

vue init webpack vue-demo

QQ截图20191206145218.png

解析：

1. Project name：项目名称
2. Project description：项目描述
3. Author：作者
4. Vue build：vue的构建方式。第一种 Runtime + Compiler 运行加编译（推荐），第二种 Runtime-only 仅运行
5. Install vue-router? ：是否安装 vue-router ，这是官方的路由，大多数情况下都使用，输入“y”后回车即可。
6. Use ESLint to lint your code?：是否使用 ESLint 管理代码，ESLint 是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
7. Pick an ESLint preset：选择一个 ESLint 预设，编写 vue 项目时的代码风格，选择 Standard （标准）即可。
8. Setup unit tests：是否安装单元测试，选择安装即可。
9. Pick a test runner：选择一个单元测试运行器，选择 Jest 即可。
10. Setup e2e tests with Nightwatch? ：是否安装 e2e 测试框架 NightWatch ，（e2e，也就是 End To End，就是所谓的“用户真实场景”）。
11. Should we run npm install for you after the project has been created?：项目创建后是否要为你运行“ npm install ”。

2.2 安装依赖

在上一步的第11项中选择“ yes,use NPM ”开始安装，或者选择“ No, I will handle that myself ”后，进入项目目录下使用npm install命令手动安装。

QQ截图20191206150123.png

QQ截图20191206150153.png

QQ截图20191206150214.png

2.3 项目目录结构与文件解析


• build 目录：构建脚本目录，webpack的初始化配置
  • build.js ：生产环境构建代码
  • check-version.js ：检查node、npm等版本
  • utils.js ：构建工具相关
  • vue-loader.conf.js ：webpack loader配置
  • webpack.base.conf.js ：webpack基础配置
  • webpack.dev.conf.js ：webpack开发环境配置,构建开发本地服务器
  • webpack.prod.conf.js ：webpack生产环境配置
• config 目录：构建配置目录，项目初始化的配置，包括端口号等
  • dev.env.js ：开发环境变量
  • index.js ：项目一些配置变量
  • prod.env.js ：生产环境变量
  • test.env.js ：测试脚本的配置
• node_modules 目录：存放 npm install 安装的项目依赖的模块
• src 目录：源码目录，这里是我们要开发的目录，基本上要做的事情都在这个目录里
  • assets 目录：资源目录，放置图片，如logo等
  • components 目录：组件目录，放置组件文件
  • router 目录：路由目录，放置路由的配置
  • app.vue ：页面的入口 vue 文件
  • main.js ：项目的入口 js 文件
• static 目录：放置静态资源目录，如图片、字体等。
• test 目录：初始测试目录，可删除
• .babelrc ：ES6 语法编译配置
• .editorconfig ：定义代码格式
• .eslintignore ：eslint 检测代码忽略的文件（夹）
• .eslintrc.js ：定义 eslint 的 plugins,extends,rules
• .gitignore ：用来过滤一些版本控制的文件，比如 node_modules 文件夹
• .postcsssrc ：postcss 配置文件
• index.html ：访问的页面
• package.json ：项目配置文件，记载着项目的描述信息和依赖等
• README.md ：项目的说明文档，markdown 格式