windows下搭建VUE开发环境

Vue.js (读音 /vjuː/，类似于 view)是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue项目通常使用webpack（.vue 文件必须先转化为 .js 文件，才能被浏览器识别。使用 webpack 是利用 vue-loader 将单文件组件转化为 .js 文件）工具来构建，而webpack命令的执行是依赖node.js的环境

一、vue-cli

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
安装命令为：cnpm install vue-cli -g，回车，等待安装。



安装完后，检查是否安装成功



开始一个新的Vue项目

# 使用vue-cli初始化项目
vue init webpack vue-d1
vue init webpack-simple vue-d2

# 进入到目录
cd vue-d1

# 安装依赖
npm install

# 开始运行
npm run dev

使用webpack或者webpack-simple的区别:

Project name (my-project) //请输入项目名称，回车默认
Project description (A Vue.js project) //请输入项目描述，回车默认
Author h2 <ooxx@qq.com> //请输入作者名，回车默认
Vue build //请选择构建模式，请直接回车选择第一条
Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
HTML) are ONLY allowed in .vue files - render functions are required elsewhere
Install vue-router? Yes //是否安装vue-router,回车
Pick an ESLint preset (Use arrow keys) //是否安装ESLint代码检查器(编码规范)
Standard (https://github.com/standard/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)

Setup unit tests with Karma + Mocha? Yes //单元测试，懒，不要
Setup e2e tests with Nightwatch? Yes //端到端测试，懒，不要
----------------------------------

Project name vue-d2
Project description A Vue.js project
Author h2 <ooxx@qq.com>
License MIT
Use sass? No
生成的文件夹：



备注

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

二、webpack

先安装webpack。

cnpm install webpack -g //全局安装

cnpm install webpack-dev-server -g//安装调试工具