windows下搭建VUE开发环境

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

1、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.

 

2、webpack

先安装webpack。

cnpm install webpack -g //全局安装

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