VUE安装教程以及组件库的使用

╰+哭是因爲堅強的太久メ 2021-11-09 21:44 585阅读 0赞

## **一.单独VUE文件使用** ##

下载vue.js单文件，然后在html文件中引入这个文件。例如：

。

**单独使用vue.js问题**  
单独使用vue文件时，是在script标签中使用vue会有麻烦之处：  
1：组件的样式不能隔离。  
2：组建的模板如果写在组件对象中，则必须写成字符串格式，如果写在type=text/html的script标签中，则模板和js代码以及css代码都会分开写，不利于组件的维护。

所以使用Vue提供的单文件组件功能，可以解决这些问题，但是Vue单文件组件必须在vue-cli工具创建的项目中使用（第二种使用方法）。

**模块化概念**  
将一段代码封装为一个独立的模块，可以被其他模块依赖、使用。  
JavaScript本身不支持模块化，在浏览器环境中，可以直接在script标签中写js代码，也可以通过script标签设置src属性导入一个外部的js文件。但是从外部导入有两个缺点：  
1，通过script标签导入的多个js文件最终是被拼接成一个js文件执行，也就是最终使用一个共同的全局作用域，那么每个js文件中就不能使用相同的全局变量名或方法名，否则会造成变量名冲突。  
2，script标签的导入是按照顺序从上到下执行的，那么多个js文件的导入也必须按照顺序写，（例如，bootstrap.js依赖juery.js，那么必须先导入jquery.js，再导入bootstrap.js）。如果多个js文件之间依赖关系复杂，那么导入顺序将会很难判断，所以会将其模块化。

nodejs中，由于加载的js文件都是本地文件，所以实现了模块化，使用module.exports=xxxxxx导出一个模块，使用require导入一个模块。  
直到ES6，官方推出了标准的js模块化解决方案。import导入和export导出。但是，目前浏览器和nodejs中都不能直接使用ES6的模块化技术。  
但是使用ES6模块化的js代码，必须通过babel或webpack进行转换，才能被nodejs或浏览器执行。

Webpack是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。

## **二.创建vue项目插件及环境** ##

**Vue-cli分为2.0和3.0（先使用2.0）**  
先安装node.js环境(使用安装包)  
*1.安装npm及切换源：*  
使用npm 全局安装webpack，npm的使用需要先安装node.js环境。

提示：npm是一个随同Node.js一起安装的包管理工具（类似于python中的pip），npm 默认镜像为国外，访问或下载速度慢并且导致失败，所以可以切换npm源。切换源需要用到nrm，nrm 是一个npm源管理器，允许你切换npm源。

*（1）安装nrm: npm install -g nrm (此时使用的依然是国外的源)*  
![在这里插入图片描述][20190801182844157.png]  
*（2）查看可选的源 nrm ls*  
![在这里插入图片描述][20190801182852631.png]  
*（3）切换源（以taobao为例）：nrm use taobao*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]  
*（4）测试所有源响应时间：nrm test*

***2.开始安装webpack及相关插件：***  
*（1）安装webpack ：npm install webpack -g*  
也可执行这个命令(npm install -g webpack)，安装之后输入webpack -v 查看是否安装成功  
![在这里插入图片描述][20190801182941264.png]  
注意：在webpack3版本及其以前，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli。（此时，输入 webpack -v 查看版本会发现，提示让你安装webpack-cli）所以还要继续安装webpack-cli (这两个必须在同一个目录下)

*（2）安装webpack-cli ： npm install webpack-cli -g*  
![在这里插入图片描述][20190801183000902.png]  
以上安装一次即可，下面开始用vue-cli2或者3创建项目

\*\*

## 三.什么是Vue-cli脚手架 ##

\*\*  
解释：Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

## 四.Vue-cli 2.0(脚手架） ##

**1.安装vue-cli 2**  
全局安装：npm install --global vue-cli 安装之后 输入vue -V(大写V) 查看是否安成功。

**2.使用vue-cli 2创建项目**  
*（1）直接在某个目录下创建一个空文件夹(名字随便起 随时改不影响)，shift+右键 进入 改文件夹的命令行模式。*

*（2）执行命令 vue init webpack xxx (xxx为你的项目名字，不能大写)，init可理解为初始化，  
然后跳出以下选项:(最后三个选项选NO)*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 1]  
*（3）安装依赖：cd进入项目目录：输入npm install （该步骤可能因为网络原因失败，多试）*

解释：npm install ：安装所有的模块，如果是安装具体的哪个个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，所以我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node\_modules文件夹，这里放的就是所有依赖的模块。后面会用到 npm install --save axios 就是这个原理

*（4）启动项目：进入项目目录 执行npm run dev*

（5）项目目录解释：  
一般我们会在src下建一个pages文件夹，里面写我们的一级路由及二级路由组件

![在这里插入图片描述][20190801183143353.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 3]  
附带参考链接：https://www.jianshu.com/p/32beaca25c0d

**3.在vue项目中使用vux组件库（完整版）**

*（1）进入项目保存目录，执行vue init webpack xxx项目名*  
*（2）根据项目创建提示填写信息*  
*（3）cd 进入创建的项目目录 执行 npm install*  
*（4）使用Hbuilder打开项目，修改build目录下webpack.base.conf.js配置*  
解释：配置如下：在build下面的webpack.base.conf.js中修改如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 4]  
*（5）命令行工具执行下载命令：*  
npm install vux --save  
npm install vux-loader --save  
npm install vue-style-loader --save  
npm install css-loader --save  
npm install less --save  
npm install less-loader --save

全部下载完成，执行npm run dev

## 五.Vue-cli 3.0(脚手架） ##

**1.安装vue-cli 3（插件与配置）**  
如果有旧版本，先卸载：npm uninstall vue-cli -g  
下载新版本：npm install -g @vue/cli  
快速原型设计开发需要先安装一个额外的全局插件：  
Vue-cli3中有介绍这一步骤  
执行：npm install -g @vue/cli-service-global

**2.使用vue-cli 3创建项目**  
*（1）创建空文件夹  
（2）Shift+右键 进入cmd*  
*（3）创建新项目：vue create xxx 出现以下选项，这里点击3选项为例*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 10]  
*（4）cd 进入项目目录 执行npm install 加载环境*

*（5）执行npm run serve 运行即可（注意不是server）*

**3.使用vant组件库**  
进入项目目录 执行：npm install vant --save  
*（1）下载之后在main.js中进行配置和全局注册(大小写分明)：*  
import Vant from ‘vant’  
import ‘vant/lib/index.css’  
Vue.use(Vant)  
*（2）局部引入，样式还是需要在main.js中引入*  
import ‘vant/lib/index.css’

import \{ Button \} from ‘vant’;  
Vue.use(Button);

## 六.备注 ##

**1. 关于vue中Ajax请求**  
先安装axios： npm install axiox --save  
*(1)全局引入：在main.js中：*  
import axios from ‘axios’  
把axios写入Vue原型链，这样就可以全局使用了 xxx一般写http  
Vue.prototype.xxx = axios this.xxx.get/post 调用  
*(2)单独文件夹引入：*  
import axios from ‘axios’ axios.get/post 调用

*(3)关于携带请求参数：*  
post(‘url’,\{key:value\})或  
将请求参数转换为字符串：  
post(‘url’,JSON.stringify(\{ key:value\}))  
get(‘url’,\{pramas：\{key:value\}\})

**2.关于公共css样式单独文件引入**  
在main.js中引入(淘宝样式)：  
import ‘./assets/index.css’ （路径随意，但一般写在这个目录下)

**3.关于全局都可使用的函数方法**  
可以写到一个单独js，在src下面创建一个文件夹，在这个文件夹中创建js：  
注意：在这个js文件中 最后必须导出 ，在main.js中进行引入。举例：vue中的过滤器方法。  
在src下面创建一个utils(文件夹名字随意)工具文件，其下创建一个imageFilter.js文件，该js文件中有function iconFilter()\{\}函数 ，最后导出 export \{iconFilter\}  
在main.js中引入：(导出对象引入也是对象)  
import \{iconFilter\} from ‘@/Utils/imageFilter.js’  
全局注册过滤器  
Vue.filter(‘iconFilter’,iconFilter)

**4.跨域请求（vue-cli2.0与3.0）**  
在vue-cli版本2中在 config下面index.js中书写。  
在dev下的proxyTable中写：  
proxyTable: \{  
// 1.配置哪些请求路由需要进行转发  
‘/douyu’:\{  
// 当接收到/douyu开头的请求时，这部分请求会被转发到target指定地址  
target: ‘http://open.douyucdn.cn’,  
// 是否转换请求原点，必须设置为true(false走的是重定向)  
changeOrigin:true,  
// 转发时，把url指定的字符进行替换  
pathRewrite:\{  
// 把url中的/douyu转为空字符串  
“^/douyu”: “”  
\}  
\}  
\},

在vue-cli版本3中需要在项目目录下建立一个 vue.config.js文件，名字必须是这个。填写以下：  
module.exports = \{  
devServer:\{  
proxy:\{  
“/ele”:\{  
target:“https://h5.ele.me”,  
ws:false,  
changeOrigin:true,  
pathRewrite:\{  
“^/ele”:’’  
\},  
// 默认转发不带cookie，只带请求数据  
// cookieDomainRewrite将请求过程中将cookie也进行转发  
cookieDomainRewrite:\{  
// 保存在127.0.0.1  
‘\*’:‘127.0.0.1’  
\}  
\}  
\}  
\}  
\}

[20190801182844157.png]: /images/20211109/37bb757c457c4765808f0ceab9b586f2.png
[20190801182852631.png]: /images/20211109/2984230dbfd94899bb1660cc2beb4666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70]: /images/20211109/f7f1a5cd2d7c40009e5d3fac5b07bbfb.png
[20190801182941264.png]: /images/20211109/dbbd0c7a421141e08886e588c2900c44.png
[20190801183000902.png]: /images/20211109/105c6308c43c48f29db26e59bbb44b42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 1]: /images/20211109/5643c3ff72bf4de188254f24d647e19e.png
[20190801183143353.png]: /images/20211109/8c31550f7776441980f645e34ca784d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 2]: /images/20211109/2b48f511f40748a59942293c78cbe1c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 3]: /images/20211109/d46cae6efd5949da8d4122160f50f71e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 4]: /images/20211109/108102b2c13340b686e770bb4f1897a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 5]: /images/20211109/43080e26e97f4243b7e4ab24bd865605.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 6]: /images/20211109/f413e750ad3b4f3f971fce713cea1601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 7]: /images/20211109/c24d39aeffae46f5b2064ee0dd72b2a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 8]: /images/20211109/71f5e89786774ba2a495d907d9527322.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 9]: /images/20211109/805fe0dec5dc4d99aa63d8d28e4adee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTQzMTYz_size_16_color_FFFFFF_t_70 10]: /images/20211109/6e3c18419e494281baa46fbe0fb3920b.png