vue环境搭建

先下载node.js https://nodejs.org/zh-cn/download/

安装，next，改变安装的路径，我安装在自己的开发盘中

安装完成后，进入cmd，输入node –version看到node的版本信息则安装成功，nodejs后会自动安装了npm

下一步，我们来安装vue-cli，安装的是2.9.6版本

具体步骤如下：

使用淘宝npm镜像

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

安装完成之后我们就可以使用

cnpm install [name]来安装需要的组件了

安装vue最新稳定版

cnpm install vue

全局安装vue-cli

cnpm install --global vue-cli

进入想要创建项目的路径，我选择的是D:\vue

构建一个基于webpack的项目

vue init webpack demo

出现下面的配置，直接按回车，到了Eslint这一步往下都选择n,z主要是为了编写代码的时候方便，Eslint会有所规范，如果不是习惯这种规范的人，写代码时会让你头疼

安装完成后，输入

cd 项目名

cnpm install

npm run dev

在浏览器中输入localhost:8080

我使用的编程工具是HbuilderX

看一下项目的目录结构吧

node_modules

npm安装的组件保存的位置

static

自己定义的css，js等要放在这个目录下

src,代码主要这里面编辑

接下来，我们在写界面的时候，可能要使用到其他的UI框架，我们可以直接引入，也可以是cnpm安装到项目中去，然后再main.js中引入并使用，自行百度

Element-UI: cnpm i element-ui -S

jQuery:     npm install jquery --save-dev

Bootstrap:    cnpm install bootstrap@3 --save-dev

Ant-design: cnpm install antd –save

因为bootstrap是依赖jquery的，所以在引入bootstrap之前一定要先引入jquery

在main.js中加入以下代码

//必定事先声明webpack，不然下面会不识别webpack

const webpack = require('webpack')

...

module.exports = {

    resolve: {

        ...

        alias: {

          ...

          'jquery': 'jquery' 

        }

    },

plugins: [

        new webpack.ProvidePlugin({

          $: "jquery",

          jQuery: "jquery",

          "windows.jQuery": "jquery"

        })

    ],

    ...

}