欢迎访问 生活随笔!

尊龙游戏旗舰厅官网

当前位置: 尊龙游戏旗舰厅官网 > 前端技术 > vue >内容正文

vue

vue怎么改logo-尊龙游戏旗舰厅官网

发布时间:2023/12/1 vue 17 豆豆
尊龙游戏旗舰厅官网 收集整理的这篇文章主要介绍了 vue怎么改logo_vue全家桶项目构建教程 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

前言

vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及vue全家桶其他框架的使用,以下将详细地介绍本人在处理工程文件构建的过程;对于刚开始解除vue的新手,建议使用官方脚手架vue-cli,当然,如果你对于webpack很熟悉,你也可以自己动手搭建自己的脚手架,当然如果你没把握的话,还是推荐使用vue-cli,能更好的帮助你搭建项目:

步骤一、安装vue-cli

首先,我们可以通过npm安装vue-clic,前提是我们需要有node环境,如果电脑还没安装node,先安装,可通过

node -v

查询node的版本号,有版本号则已经安装成功;

接下来,我们需要确保电脑已经安装了webpack,webpack是一个包管理工具,也是vue-cli的构建工具,安装也很简单,全局安装只需要执行

npm install webpack -g

紧接着,开始我们vue-cli的安装

npm install --global vue-cli

查看是否安装成功,我们可以通过在cmd中输入vue -v 查看,如下图出现版本号则说明安装已经完成;

我们可以打开c盘>用户>用户名>appdata>roaming>npm查看我们全局安装的vue-cli,如下图:

步骤二、构建工程文件

安装完vue-cli后,我们可以通过在cmd中输入

vue init webpack projectname

生成webpack脚手架,在我们按下回车的时候,会出现一些提示问题,对应关系如下:

  • 项目名称(注意名称中不要出现大写字母,否则会报错)
  • 项目描述(可写可不写,看个人需要)
  • 作者(可写可不写,看个人需要)
  • vue编译,这个选默认即可,运行加编译runtime compiler
  • 是否安装vue-router是否安装vue路由工具
  • 是否使用代码管理工具eslint管理你的代码
  • 后面几个是测试的工具,需要自己自行了解
  • ......

紧接着,我们使用cd squareroot 移动到文件夹squareroot下,执行

npm install

初始化项目,安装package.json 文件中描述的依赖,初始化完成后,我们可以通过

npm run dev

运行我们的项目,这个时候,我们可以打开浏览器,输入http://localhost:8080/,可看到如下界面,说明我们的项目脚手架已经初始化完成;

步骤三、项目结构解析

虽然我们是通过vue-cli生成的项目结构,但还是希望读者能够清楚的知道每个文件的作用,这样对于我们学习该脚手架以及搭建自己的脚手架会有很好的帮助,如下图,是一级目录下的文件的作用:

构建相关的代码主要是放在build文件夹和config文件夹下,包括了开发环境和生产环境,即dev和product,可以打开文件进行阅读,有接触过node的小伙伴应该可以很快读懂对应文件代码的作用,这里就不做详细的介绍了,需要注意的一点是,我们需要修改打包后文件的路径的时候,可以通过修改config文件夹下的index.js文件,如下图:

这里,我们需要在src目录下新增一个page文件夹,用于存放页面相关的组件,而components存在的是公共的组件,这样做有利于我们更好的理解项目:

步骤四、引入ui框架iview

该步骤并不是一定要实现的,实际项目操作中,要根据具体需求而引入对应的ui框架或者不引入,鉴于指导的作用,在此处也做个示范,给与参考,可先阅读ivew尊龙游戏旗舰厅官网学习;

首先,我们应进行iview的安装,可利用npm包管理工具安装

npm install iview --save

安装成功后,我们要将对应的框架引入到项目中,这个时候,尊龙游戏旗舰厅官网上有两种方法可以实现,第一种是直接在main.js中做如下配置:

import vue from 'vue'import app from './app'import router from './router'import iview from 'iview';import 'iview/dist/styles/iview.css';vue.config.productiontip = falsevue.use(iview);/* eslint-disable no-new */new vue({ el: '#app', router, components: { app }, template: ''})

这种方式是一种全局引入的方式,引入后就在具体的页面或者组件内不需要再进行其他的引入,但缺点是无论是否需要该组件,都将全部引入,对于性能优化不是很好,这里推荐第二种用法,按需引入,这里需要借助插件babel-plugin-import实现按需加载组件,减小文件体积。首先需要安装,并在.babelrc中配置:

npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [["import

总结

以上是尊龙游戏旗舰厅官网为你收集整理的vue怎么改logo_vue全家桶项目构建教程的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错,欢迎将尊龙游戏旗舰厅官网推荐给好友。

  • 上一篇:
  • 下一篇:
网站地图