vue - vue项目的搭建以及初始化

一、项目的搭建

• 首先，检查一下之前是否已经安装了脚手架：

  • 可以通过 vue-V来检查
    

• 若是没有安装，则先安装脚手架

  	npm install -g vue-cli 
  	cnpm install -g vue-cli    //淘宝镜像安装
  

• 安装完成后，进入想要安装的文件夹开始创建项目

  	vue init webpack 项目名称
  

  

• 安装完成后多出这些文件夹以及文件：
  

• 各个文件的用途：
  

二、项目的初始化

ps：根据自己的需要安装对应的包

1. 安装依赖包

• 请求方法axios：

      npm install axios
      或者
      cnpm install axios  	(淘宝镜像的方式)
  

• 状态管理vuex

  	npm install vuex --save
  

• 如果是用less来写样式就安装less编译

   	npm install less-loader  --save -dev
   	或者
   	npm install less-loader --save
  

• 如果是用sass来写样式就安装sass编译

  	npm install node-sass --save-dev
  	npm install --save-dev sass-loader 
  	或者
  	npm install --save-dev node-sass
  

• 使用到的其他ui框架，可以参照对应的官网进行安装使用

2. 在main.js文件进入使用的依赖包

3. 新增文件夹存放对应的文件

4. 使用glup编译样式使之能兼容多种浏览器

在这里我只列举出less的编译，sass的编译也类似

• 在项目下面新建一个gulpfile.js文件‘’
  
• 写入一下的代码：
  

	var gulp = require ( 'gulp' ) ,
	    less = require ( 'gulp-less' ) ,
	    autoprefixer = require ( 'gulp-autoprefixer' );