vue脚手架安装终端安装步骤以及目录介绍

1、 vue-cli 脚手架安装  环境 资源 测试  热启动 打包上线  
   webpack  主流  前端三大自动化工具
   gulp 
   grunt

    1）测试是否有node 环境 并且 node 版本>=v 8.11.0

       使用命令 node -v

    2）为了让下载包的速度快 安装 cnpm      yarn  不会丢包 并行下载
       测试有没有：cnpm -v
       有  ok
       没有：http://npm.taobao.org

     3）全局安装 vue-cli

        cnpm install vue-cli --global 或者
        cnpm install vue-cli -g
        苹果电脑：sudo cnpm install vue-cli -g
                输入密码：

     4) 测试 vue-cli 是否安装成功
        命令：vue -V 或 vue --version    可以查出他的版本  2.9.6
2、通过 vue-cli 构建 vue 项目
         命令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                       运行命令
  安装scss
    cnpm install --save-dev sass-loader
    cnpm install --save-dev node-sass
  安装vuex
    npm install --save vuex
  安装axios
    npm install axios
  安装fastclick
    npm install fastclick --save

    npm install stylus --save

    npm install stylus-loader --save

    npm install [email protected] --save
————————————————————————————————————————————————————————————————————————————
cli项目目录说明

基本不动
build          --构建   （打包构建的js） 
config         --配置    （配置文件 端口/打包路径）
node_modules   --node  模块 （下载的插件/模块）

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

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

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

基本不动
index.html     -- 主模版页面
package.json   -- 项目配置文件（项目说明，项目的依赖）
   webpack-dev-server 创建web 服务器 的 模块
   
   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 

必须有一个根标签

js 


css