搭建简单的vue项目

一. 安装环境

1. 安装node.js

下载地址为：https://nodejs.org/en/
检测是否安装成功，是否显示版本号

因为npm在国内下载第三方包的速度非常的慢，所以我们需要安装淘宝镜像，以此来提高我们的开发效率。
运行一下命令：

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

检查是否安装成功

2. 搭建vue项目环境

全局安装vue-cli：npm install --global vue-cli

进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

注意：

• Vue build ==> 打包方式，回车即可；
• Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
• Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
• Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
• Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

项目创建完成：

进入项目：cd gms，安装依赖

安装之后会多出一个文件夹：node_modules

启动项目:npm run dev
启动成功：


至此一个简单的vue项目搭建完成，下面对这个项目及目录进行一个简单的讲解

二. 目录讲解

目录结构如下所示：

1.build：构建脚本目录

里面是对 webpack 开发和打包的相关设置

1. build.js ==> 环境构建脚本；
   loading动画、删除创建目标文件夹、webpack编译、输出信息

'use strict' // js的严格模式
require('./check-versions')() // node和npm的版本检查

process.env.NODE_ENV = 'production' // 设置环境变量为生产环境

const ora = require('ora') // loading模块
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start()

// rm方法删除dist/static文件夹
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err //若删除中有错误则抛出异常并终止程序
  webpack(webpackConfig, (err, stats) => { //若没有错误则继续执行，构建webpack
    spinner.stop() //结束loading动画
    if (err) throw err //若有异常则抛出
    process.stdout.write(stats.toString({ //标准输出流，类似于console.log
      colors: true, // 增加控制台颜色开关
      modules: false, // 是否增加内置模块信息
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,  // 允许较少的输出
      chunkModules: false// 编译过程持续打印
    }) + '\n\n')

    // 编译出错的信息
    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }

    // 编译成功的信息
    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

2. check-versions.js ==> 检查npm，node.js版本；
3. utils.js ==> 构建相关工具方法；
4. vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
5. webpack.base.conf.js ==> webpack基本配置；
6. webpack.dev.conf.js ==> webpack开发环境配置；
7. webpack.prod.conf.js ==> webpack生产环境配置；

2.config：项目配置

1. dev.env.js ==> 开发环境变量
2. index.js ==> 项目配置文件；
3. prod.env.js ==> 生产环境变量；

3.node_modules：npm 加载的项目依赖包

4.src

这里是我们主要开发的目录，整个项目所做的是事基本上都是在里开发。

1. assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建。
2. components：组件目录，我们写的组件就放在这个目录里面；
3. router：前端路由，我们需要配置的路由路径写在index.js里面；
4. App.vue：根组件，后续根据需要可以自己自定义跟组件；
5. main.js：入口js文件，后期我们的需要引入的一些组件都是可以在这里引用，对全局生效。

5.static：静态资源目录

比如图片、字体，次文件不会被webpack构建

6. index.html：首页入口文件，可以添加一些 meta 信息等

7. package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息。

项目通常不会将node_modules拷贝过去，一般npm i 会下载package.json中定义的包。

8.README.md：项目的说明文档，markdown 格式