Vue学习笔记一 创建vue项目

1：安装Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。可以搜索Node.js的官网下载，安装完成后，打开命令提示符cmd.exe,输入node -v ,可以看到安装的Node.js的版本。

在命令提示符终端输入： node -v查看Node.js的版本

npm是Node.js的包管理工具（package manager），是全球最大的开源库生态系统。npm在Node.js安装的时候顺带装好了。

npm的是使用场景：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

在命令提示符或者终端输入：npm -v，同样看到安装的版本。

2：安装vue-cli

Vue-cli是Vue的脚手架工具，用 vue-cli 可以快速创建 vue 项目。相当于可以快速生成一个Vue项目的模板，不同一个一个地去创建各种配置文件，用起来很方便。

在命令提示符终端输入：
npm install -g vue-cli

3：vue-cli构建vue项目

新建一个文件夹，可以在文件夹中用快捷键 Shift+鼠标右键，点击在此处打开命令窗口（W），就不用再用cd进入该目录。

在命令提示符终端输入：
vue init webpack-simple first-project

webpack-simple是项目模板的名称，first-project是生成的项目名称。要求输入项目名，项目描述，作者等可以直接回车跳过。

运行之后生成了一个名为first-project的文件夹，目录结构如下图所示：

其中webpack.config.js内容

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',//唯一入口文件

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',//打包后的文件存放的地方
    filename: 'build.js'打包后输出文件的文件名
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

上述文件很总要，表名了原文件的位置是在当前目录下的/src/main.js，以及打包后的文件存放的文件夹及位置。以及图片转化，ES6转化，压缩方面相关的配置。

4：安装项目依赖

在first-project的文件夹中用快捷键 Shift+鼠标右键，点击在此处打开命令窗口（W），进入项目目录。
在命令提示符终端输入：
npm install

安装完成后，目录下会产生一个node_modules文件夹。

5：启动项目

在命令提示符终端输入：
npm run dev

npm run dev命令后并不会在dist目录下生成build.js文件，开发环境下build.js是在运行内存中的。
浏览器自动打开，可以看到下图，端口默认是8080

6：发布项目

在命令提示符终端输入：
npm run build

会生成发布时的build.js，并且是经过压缩的。生成的文件：