Django从入门到放弃之使用 npm 适配 ViewUI（七）

------------

> #### Django从入门到放弃之使用 npm 适配 ViewUI（七）
> ## 一、 安装 npm 并更新到最新版本

>　这里如果是 win 下面的环境那么 npm 安装完成后会在 C:\Users\98624\AppData\Roaming\nmp 安装一些包, 事实上这就是全局安装, 我们使用下面的命令就能看到

npm list -global

> [npm中文文档](https://www.npmjs.cn/getting-started/installing-node/ "文档")
> [ViewUI开源地址](https://github.com/view-design/ViewUI "ViewUI开源地址")

> 如果下载速度慢请使用阿里的源

npm config set registry https://registry.npm.taobao.org/
	npm config get registry

> 更新

npm install npm -g
	npm -v

> ## 二、npm 下载 ViewUI

> 安装官方的操作有几种方法, 不过我说 ViewUI 也太贵了吧， 其实便宜点还好还是有人去贡献源码不过这，我们只是学习下或者说嵌套下目前 vue 比较火我们先使用看看好吧

> 切换到我们响应的本地目录 polls/static/polls/

> 我们首先安装 vue

npm  install vue --save

> 接着我们安装 viewUi

npm install view-design --save

> 之后我们会发现错出一个 json 文件，这表示局部安装后的文件，我们可以在里面找到我们需要的一些结果

package-lock.json

> 并且我们安装的所有包都在这里面 node_module, 当前我们会发现 viewUi 的包实在是太大了，不过这并不妨碍我们开发

<center>
![图片alt](/media/editor/1595519791359_20200723235632206720.png ''图片title'')
</center>

------------

> 如果您不喜欢 node_module 这个名字我们有一个好的解决办法， 那就是使用 yarn 来管理或者我们使用引入 js 的方式

> 或者使用 Django-npm

> 现在我们发现其实在 win 下面使用 npm 的方式其实并不划算，因为整个 vueUi 和 vue 下下来太大了不过没关系我们现在目前学校阶段，等出在 LINUX 教程的时候我们整个搭建就方便多了

> 现在我们找到 django.contrib.staticfiles 这个模块会帮助我们去寻找静态文件比如一些 css、javascript 、font、image等。

> 我们修改 setting.py 文件

STATIC_URL = '/static/'

> 现在我们在 index.html 中引入这些文件, 引入了 vueUi 中的 css

{% load static %}

<!DOCTYPE html>
	<html>
	<head>
		<title></title>
		    <link rel="stylesheet" type="text/css" href="{% static 'polls/node_modules/view-design/dist/styles/iview.css' %}">
	</head>
	<body>

</body>
		<script type="text/javascript" src="{% static 'polls/node_modules/vue/dist/vue.js' %}"></script>
		<script type="text/javascript" src="{% static 'polls/node_modules/view-design/dist/iview.min.js' %}"></script>
	</html>

> 现在我们试试我们的 UI 套件吧

{% load static %}

<!DOCTYPE html>
	<html>
	<head>
		<title></title>

</head>
	<body>
			{% if latest_question_list %}
			<ul>
			{% for question in latest_question_list %}
			   <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
			{% endfor %}
				</ul>
			{% else %}
				<p>No polls are available.</p>
			{% endif %}

<div id="app">
				<i-button @click="show">Click me!</i-button>
				<Modal v-model="visible" title="Welcome">Welcome to ViewUI</Modal>
			</div>

</body>

> view Ui 的效果

![图片alt](/media/editor/1595574521219_20200724150842274622.png ''图片title'')

> #### 现在您已经学会如何使用 Django 的静态资源来完成引入 vueUi 框架和 vue 快来下一章我们来讨论前面关于后台管理的事情

> 如果你喜欢本博客请点赞转发关注并且在转发的时候标明出处，支持原创

CXX1.COM原创博客网

您还没有登录，请您登录后发表评论。

搜索：

TAG cloud