前端命令之vue

vue命令

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

直接安排步骤：
1.全局安装vue-cli (脚手架安装)
首先测试是否有node 环境 并且 node 版本>=v 8.11.0

       js使用命令 node -v

1.(1)npm install -g vue-cli（国际开源库生态系统）
(2)cnpm (使用国内镜像安装)先用淘宝镜像安装cnpm才可以使用

  npm install -g cnpm --registry=https://registry.npm.taobao.org

检查：cnpm -v
(3).或者是用cnpm 安装vue脚手架

    cnpm install -g vue-cli

检查 vue -V(大写v)
安装失败便清理缓存 （npm cache clean）

2. 进入项目

1. 通过 vue-cli 构建 vue 项目

      vue init webpack project
       解释
       vue                init        webpack             project
      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 vue-awesome-swiper@2.6.7 --save

 ajax请求的vue插件用来和服务器端进行数据通信
 npm install vue-resource --save

*2.vue完整项目目录构建：*

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 过滤配置  （例如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 格式

有了vux结合vue更加方便
下面就是引入vux步骤
cd 进入指定目录

npm install vux --save
npm install vux-loader --save

配置项目：bulid/webpack.base.conf.js

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

npm install vue-style-loader
npm install css-loader
npm install less
npm install less-loader

vue中引入jquery
终端下载jquery(npm install --save jquery)
然后在build的webpack.base.conf.js定义

 var webpack = require（‘webpack’）

然后写入 plugins

plugins:[
    new webpack.ProvidePlugin({
      $:'jquery',
      jquery:'jquery',
      jQuery:'jquery',
      'window.jQuery':'jquery'
    })
  ],

src里面的mian.js中引入 jquery

个人点评：
以上内容皆依赖于node.js 首先要安装node 以上便是我用到的命令，欢迎大家"点评"