vue 安装一系列操作

Posted 2020-11-22 zhd09

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

})