vue.js + element集成蓝鲸开发框架

1、windows安装npm包管理工具

下载node.js的windows版:https://nodejs.org/en/,安装后添加到系统环境变量

修改npm的代理(也可以用淘宝的cnpm),要用内网需要代理:$npm config set proxy http://server:port

                                                                                                 $ npm config set https-proxy http://server:port

2、构建vue.js环境

这里使用了网上的一个管理界面模板:https://github.com/taylorchen709/vue-admin

把项目放在aac-framework的根目录下面。进入vue_admin文件夹,分别执行:npm install、npm run build、npm run dev

npm install:安装项目的依赖,下载到vue_admin/node_modules内,依赖项配置文件:vue_admin\package.json

npm run build:提取并压缩前端文件,保存在vue_admin/dist文件夹

npm run dev:本地开启dev进程,支持热部署。端口可以在vue_admin/config/index.js里面配置

 

升级element版本:npm install -g npm-check-updates、ncu、npm uninstall element-ui、npm install element-ui -

然后需要更改main.js中的 theme-chalk 主题可参考:https://blog.csdn.net/wh13267207590/article/details/80196183

3、配置路径

  • 配置vue_admin\config\index.js(assetsSubDirectory和assetsPublicPath有多处):

  • 配置aac-framework\conf\default.py:

# Add for vuejs
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, "vue_admin/dist/static"),
)
 
 
TEMPLATES 内的 'DIRS': ['vue_admin/dist']
  • 配置home_application/url:
def home(request):
    """
    首页
    """
    return render(request, 'index.html', {"data": "hello world!"})

gitignore添加:vue_element/node_modules/

4、效果

执行npm run dev & python manage.py runserver 127.0.0.1:8000可以看到效果,其他路径等参数还需要配置:

发布了2 篇原创文章 · 获赞 0 · 访问量 19
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览