标签：nbsp grunt 调用 get 图片 工具 引用 执行 管理工具
vue安装的一系列操作
node里自带的npm包管理工具，npm的服务器在国外 所以我们一般用cnpm淘宝镜像
首先安装cnpm npm install cnpm -g （-g全局安装 ，安装一次以后都不需要再安装了）
cnpm i jquery --save 下载jquery的包
1. cnpm init -y 初始化项目，不再手动的填写项目信息 自动生成默认信息，生成一个package.json文件
2.cnpm i webpack webpack-cli --save-dev 安装局部的项目里的webpack
3.引入webpack.config.js文件
①定义了 mode 开发环境（development）还是生产环境（production）
②定义加载器的规则 用url-loader 压缩图片 下载urlloader和 file-loader 下载命令是： cnpm i url-loader -D cnpm i file-loader -D
③热更新 启动一个服务器 自动更新代码不需要每次都执行命令 下载命令是： cnpm i webpack-dev-server -D 在package.json中的scripts模块下给这个命令 定义一个别名 叫做dev 执行 cnpm run dev
④热更新的时候需要在dist文件夹里生成一个html文件 用到 HtmlWebpackPlugin插件 下载命令是 cnpm i html-webpack-plugin -D
⑤定义把scss转化为css的加载器 需要下载 sass-loader node-sass style-loader css-loader
4.安装 vue .js 下载命令cnpm i vue --save
5.安装vue-loader 用于编译.vue文件 下载命令cnpm i vue-loader vue-template-compiler --save-dev
6.下载路由 cnpm i vue-router --save
7.引入路由import vueRouter from “vue-router" 使用路由Vue.use(vueRouter)
8.下载swiper cnpm i swiper --save
9.下载vue请求：
第一种：安装cnpm i axios --save
全局注册使用：
import axios from "axios"
Vue.prototype.axios=axios;
第二种：安装cnpm i vue-resource --save-dev
全局注册使用：
import VueResource from ‘vue-resource‘
Vue.use(VueResource)
10.使用mint-ui(基于vue.js的移动端组件)
安装 cnpm i mint-ui --save
全局引入 :
import Mint from "mint-ui"
Vue.use(Mint)
import "mint-ui/lib/style.css"
11.安装vuex(状态管理工具)
安装vuex cnpm i vuex --save
import vuex from "vuex" //引入vuex
Vue.use(vuex); //使用vuex
--------------
注意：
1.--save 指的是下载的包不只在开发时候用，在上线的时候这个包也会被打包
--save-dev 下载的包只在开发环境中使用
2.webpack是一个现代JavasScript应用程序的模块打包器(module bunder)，Webpack是用来构建项目的工具，主要的功能就是打包压缩把浏览器识别不了的代码转化为能识别的代码。之前的项目打包工具有Glup grunt，后来被webpack取代了
3.webpack的两大特点：1模块化 2打包
在这里提一下模块化：
把具有一定独立功能的代码放到一个单独的文件中，每一个文件就是一个模块。管理方便、易于复用
webpack模块化其实是通过自执行函数启动，然后通过webpack自定义的exports 和require 来实现的模块化。
ES6模块化：暴露用export 或export default;前者将暴露为一个对象，后者为自定义暴露，引用用import,用{}解构赋值，在引用时加不加{}取决于export时用不用default
4.vue-loader如何使用：用于webpack中使用后缀名为 .vue 文件的配置项，在webpack中组件都放在.vue文件中，分为三部分template、script、style，script里在 export default{}里定义 data methods。使用时需要下载vue-template-compiler，在.vue文件中最后生成的是一个模板字符串 要去注册组件，默认引入的vue.js是 runtimeonly版本的，不完整版的vue 只能用render注册。完整版的vue 可以用 vue.component 和render注册
5.vuex是状态管理工具 其实就是数据管理，vuex里的state mutations getters 都是在任何组件都能用的
格式：
var store=new vuex.Store({ //实例化一个vuex的仓库存放状态（数据）
state:{}, 相当于是之前的data，在任何的组件里都能用，调用this.$store.state.xx
mutations:{},mutations就相当于是原来的methods，用来操作state，调用this.$store.commit("xx")
getters:{}相当于是之前的computed，只对外提供数据，不负责修改数据，如果要修改就找mutations ，调用this.$store.getters.xx
})
标签：nbsp grunt 调用 get 图片 工具 引用 执行 管理工具
原文地址：https://www.cnblogs.com/zhd09/p/11941156.html
