1、vue及element的安装及运用

最新推荐文章于 2024-03-29 16:48:56 发布

方方方DG

最新推荐文章于 2024-03-29 16:48:56 发布

阅读量324

点赞数

分类专栏：前端-vue 文章标签： vue.js es6

本文链接：https://blog.csdn.net/weixin_46873071/article/details/109744406

版权

前端-vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

typora-root-url: image
typora-copy-images-to: image

基本概念：

1.Vue

Vue.js是目前最火的一个前端框架，它和Angular.js、React.js一起，并成为前端三大主流框架。Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发），前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合

2.node.js

Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由RyanDahl开发，实质是对ChromeV8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。Node.js是一个基于ChromeJavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。总结一下，node.js提供了javascript在浏览器以外的一个执行环境，满足一些特定的场景需求。

3.npm

npm是nodejs的包管理和分发工具。它可以让javascript开发者能够更加轻松的共享代码和共用代码片段，并且通过npm管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

4.Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

5.vue-cli

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时lint校验，以及生产环境可用的构建版本。

6.相互之间的关系

npminstall是帮助安装vue,或React到本地，npm install也可以安装vue,React的开发工具。当然你完全可以像jQuery一样自己找网站下载下来，在页面中引入。npm就好比是一个前端的插件商店，里面有各种开发者写的包，你需要的时候就从命令行安装就可以了，类似与linux的apt的概念。node.js是服务端，浏览器端js有很多缺陷，比如不能操作本地文件呐。而服务端的js就可以，所以用node就能帮我们管理文件，处理I/O，然后经过牛逼的开发者一封装，一改造，一个grunt就出来了。

vue的开发本身是不依赖node的，不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。因此只能说webpack是依赖node的。

安装步骤：

1、首先在官网下载node.js

下载安装好后在命令行中查看是否安装成功。（在安装时会让勾选是否安装必要的一些软件，记得不勾选）。Npm是集成在node中的，所以同时查看npm包管理工具是否安装成功。如下图所示即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2yNoNyG3-1605598809812)(C:\Users\方方方\AppData\Local\Temp\1601020452760.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-58nZB4Xk-1605598809814)(C:\Users\方方方\AppData\Local\Temp\1601020457043.png)]

2、移动一下npm本地仓库的位置

下图是原来的位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AUlUxvbT-1605598809815)(C:\Users\方方方\AppData\Local\Temp\1601020475979.png)]

在安装好的nodejs的目录里新建两个目录node_cache和node-global。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9bGMCIZ-1605598809817)(C:\Users\方方方\AppData\Local\Temp\1601020486393.png)]

然后在命令行运行下面两条命令：

npm config set prefix"D:\nodejs\node_global"

npm config set cache"D:\nodejs\node_cache"

然后执行npm list -global命令

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a5ZqzKyd-1605598809818)(C:\Users\方方方\AppData\Local\Temp\1601020525241.png)]

3、配置镜像站

输入命令：npm config setregistry=http://registry.npm.taobao.org

然后输入npm config list 查看一下所有配置信息。如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ocb0OGdh-1605598809819)(C:\Users\方方方\AppData\Local\Temp\1601020547560.png)]

（可以打开这个配置文件查看，里面就是我们配置的信息）

输入命令：npm config get registry 检查一下镜像站行不行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bdkKXDUy-1605598809820)(C:\Users\方方方\AppData\Local\Temp\1601020556162.png)]

输入命令：npm info vue 看看能否获得vue的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k0uhsZfG-1605598809820)(C:\Users\方方方\AppData\Local\Temp\1601020563098.png)]

4、升级npm模块

命令：npm install npm -g

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GxQhVo5z-1605598809821)(C:\Users\方方方\AppData\Local\Temp\1601020654015.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tOk6tQdl-1605598809821)(/1287619-20171212150246691-739368557.png)]

注意，此时默认的模块D:\nodejs\node_modules 目录将会改变为D:\nodejs\node_global\node_modules 目录，如果直接运行npm install等命令会报错的。
我们需要增加环境变量NODE_PATH 如果有这个变量的话就修改，内容是：D:\nodejs\node_global\node_modules

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GeA5gZgV-1605598809822)(/1287619-20171212150402894-2086448836.png)]

（注意，刚刚操作需要重新打开CMD让上面的环境变量生效）

5、npm安装vue.js

命令：npm install vue -g
这里的-g是指安装到global全局目录去

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5z4Axlfu-1605598809822)(/1287619-20171212150420488-1331978539.png)]

安装成功后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Qa9QYcH-1605598809823)(/1287619-20171212150458519-2132301252.png)]

6、npm安装vue-router

命令：npm install vue-router -g

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-orZoIGl0-1605598809823)(/1287619-20171212150538707-640998672.png)]

安装成功后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k8AVoWCY-1605598809824)(/1287619-20171212150544879-938347487.png)]

7、npm安装vue脚手架

命令：npm install vue-cli -g

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FRhRiiJo-1605598809824)(/1287619-20171212150744051-1058132537.png)]

安装成功后：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IIzbiC5G-1605598809826)(/捕获.PNG)]

安装完成后，输入vue可能提示不是内部命令，因为vue脚本在自定义的global目录下，不在path环境变量，我们需要对path环境变量添加D:\nodejs\node_global

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U0nRUR7I-1605598809826)(/1287619-20171212150853863-1117215657.png)]

然后重新打开cmd，测试vue脚手架是否可以正常使用

命令：vue -V

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zYSczJ4l-1605598809826)(/1287619-20171212150928332-1178968243.png)]

8、创建并运行vue

重新打开cmd，切换到D盘根目录,（注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的webpack.config.js中。）

在D盘根目录下输入：vue init webpack vue01

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yCjkIX6e-1605598809827)(/1287619-20171212151033847-2077318030.png)]

创建成功后安装依赖：进入到vue01目录，使用命令npm install安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xd8TzGI0-1605598809827)(/1287619-20171212151121910-1710109810.png)]

安装成功后使用，命令npm run dev运行vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOzuXc5C-1605598809828)(/1287619-20171212151139176-1075396617.png)]

运行成功后显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hYipfw4E-1605598809828)(/1287619-20171212151206519-436420011.png)]

在浏览器输入localhost：8080

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSF11DEb-1605598809 在这里插入图片描述

829)(/1287619-20171212151256129-333658407.png)]

成功。

PS：打包命令：npm run build，（当我们使用vue-cli脚手架完成一个项目的时候，下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢，我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，但是现在我们要把他放到服务器上的话用npm run build命令就可以啦。）

生成静态文件，打开dist文件夹下新生成的index.html文件

注：目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JKlrS1MV-1605598809829)(/1287619-20171212151528301-530076803.png)]

9、引入element

（1）在当前目录下，运行:npm i element-ui -S。

（2）替换src/main.js中的代码。（最新代码按element官网所示）

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

（3）在HelloWorld或App中添加element组件代码查看是否可被执行

 <el-row>
  <el-button>默认按钮</el-button>
  <el-button type21ccce="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

执行后如下如所示即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-moERccUn-1605598809830)(C:\Users\方方方\AppData\Local\Temp\1601024231318.png)]

ps：做遇到的问题：

1、第一次安装node.js时勾选了安装必要的工具。

解决方法：强制停止了安装，并卸载了已被安装的工具，然后重新安装了node.js.

2、前一天vue安装成功后会出现正常界面，第二天再执行访问的时候界面一片空白。

解决方法：

（1）在config中的index.js文件中修改了端口号，为8181.（未解决）

（2）在config中的index.js文件中build函数里修改了assetsPublicPath属性的值，路径钱加了“.”。（未解决）

（3）在router中的index.js文件中修改了name以及component属性的值，为App。（已解决）

问题虽然以及解决，但愿意尚不太清晰。猜想可能为第一天访问的可能是HelloWorld.vue文件，而第二天访问的可能是App.vue文件。

3、在vscode中再次创建vue项目时提示错误。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8dIsU6gy-1605598809830)(C:\Users\方方方\AppData\Local\Temp\1601025565890.png)]

然后去命令行创建，提示cli版本低。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yk8Qxi5f-1605598809831)(C:\Users\方方方\AppData\Local\Temp\1601025650273.png)]

待解决

性的值，为App。（已解决）

问题虽然以及解决，但愿意尚不太清晰。猜想可能为第一天访问的可能是HelloWorld.vue文件，而第二天访问的可能是App.vue文件。

3、在vscode中再次创建vue项目时提示错误。

[外链图片转存中…(img-8dIsU6gy-1605598809830)]

然后去命令行创建，提示cli版本低。

[外链图片转存中…(img-yk8Qxi5f-1605598809831)]

待解决

方方方DG

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1、vue及element的安装及运用

typora-root-url: imagetypora-copy-images-to: image基本概念：1.VueVue.js是目前最火的一个前端框架，它和Angular.js、React.js一起，并成为前端三大主流框架。Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发），前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue的核心库只关注视.
复制链接

扫一扫