vue cli 安装步骤vue配置SCSS，安装fastclic，Vue cli 框架中各个目录的作用，以及前端构建和打包工具

vue cli 安装步骤

1、 vue-cli 脚手架安装 环境 资源 测试 热启动 打包上线

****vue-cli 脚手架 安装

（1）测试是否有node 环境 并且 node 版本>=v 8.11.0 使用命令 ：

 node -v

（2）为了让下载包的速度快 安装 cnpm 或者 yarn

 cnpm -v

 npm install yarn -g

（3）全局安装 vue-cli

widows系统：

	cnpm install vue-cli --global    或者   cnpm install vue-cli -g

ios系统：

	sudo cnpm install vue-cli -g
	输入密码

(4) 测试 vue-cli 是否安装成功

命令：vue -V 或 vue --version 可以查出他的版本 2.9.6

	vue -V 或 vue --version 

获取本地IP地址 ipconfig

2、通过 vue-cli 构建 vue 项目

cmd指令：

	vue init webpack one

解释：

   vue                init         webpack                one
   vue-cli的使用命令   初始化       前端自动化工具(模版)   项目名

? Project name                      项目名         --- 回车
? Project description               项目描述       --- 回车
? Author                             作者           --- 回车
? Vue build                         选择第一个      --- 回车   
? Install vue-router?               vue 路由       y  /  --- 回车   
? Use ESLint to lint your code?     代码风格检测     n  --- 回车   
? Set up unit tests No              测试           n    --- 回车      
? Setup e2e tests with Nightwatch?  测试           n    --- 回车   
? Should we run `npm install` for you after the project has been created? (recommended)
 Yes, use NPM                      使用npm 去安装项目依赖
 Yes, use Yarn                     使用 yarn 去安装项目依赖
❯ No, I will handle that myself     使用自己的方式安装 （cnpm）

 cd 项目名                          进入项目目录
 npm install (or if using yarn: yarn)  安装命令 cnpm install
 npm run dev                       运行命令

在vue项目中使用SCSS

(1).安装scss

 	cnpm install --save-dev sass-loader
    cnpm install --save-dev node-sass

(2).配置sass

文件路径 在项目目录中找到 build->webpack.base.config.js中添加规则

  {
      test：/\.sass$/,
      loaders:['style','css','sass']
    }

(3).在项目的style加入lang=“scss”

<style lang = "scss">
</style>

2.安装vuex

cnpm install --save vuex || npm install --save vuex

3.安装axios

cnpm install axios || npm install axios

4.安装fastclick

 		npm install fastclick --save

    npm install stylus --save

    npm install stylus-loader --save

    npm install vue-awesome-swiper@2.6.7 --save

———————————————————————————————————————————————

cli项目目录说明

基本固定目录

build -----> 构建 （打包构建的js）
config -----> 配置 （配置文件 端口/打包路径）
node_modules -----> node 模块 （下载的插件/模块）
index.html -----> 主模版页面
package.json -----> 项目配置文件（项目说明，项目的依赖）
webpack-dev-server ----->创建web 服务器 的 模块

开发目录

src -----> 项目目录 （操作的目录，写组件，功能，路由）
assets -----> 静态资源 （自己 图片 js css）
components -----> 组件
router -----> 路由
App.vue -----> 单文件组件 （可以删掉）
main.js -----> vue 入口文件

static -----> 静态 （第三方静态资源layui）

高级配置

.babelrc -----> babel的配置文件 （es6语法转为es5 的配置）
.editorconfig -----> 编辑器 配置
.gitignore -----> git 过滤配置
.postcssrc.js -----> postcss 的配置 （css3 自动兼容）

*********npm run

dev 开发的时候测试
start 开发的时候测试
build 打包

dependencies 项目依赖
devDependencies 开发依赖
autoprefixer  css3 的属性自动做兼容
babel    es6--->es5
chalk    命令行字体颜色 

engines 引擎
browserslist 浏览器支持情况

Vue.js 目录结构 根据webpack搭建的环境 前端构建、打包工具

build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 重点关注 敲代码的地方
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

前端构建、打包工具

webpack
gulp
grunt
rollback es6

脚手架中.vue 就是组件
由三部分组成

//html
<template>
  <div id="app">
      “内容”
  </div>
</template>
必须有一个跟标签
js
<script>
export default {
  name: 'App'
}
</script>

css