[原创]Ubuntu1604搭建Python+VUE

本文目标：通过PyCharm2019搭建VUE+Python前后端开发环境

前面的废话：之前后端不是GO吗？怎么用Python了。原因：菜！
腾讯云尤其阿里云好几处SDK都没有GO版本，实在没时间自己写，当然还是因为菜，所以先上Python用着吧

安装npm

sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm

更新npm淘宝镜像源

sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list

全局安装n管理器,用于管理nodejs版本

sudo npm install n -g

安装稳定版nodejs（stable版本）

sudo n stable
sudo node -v

插一句：

-》sudo n latest  安装最新版本
-》sudo n stble   安装稳定版本            
-》sudo n v8.11.3 安装指定版本

安装vue命令行，俗称vue脚手架

sudo npm install --global vue-cli

测试：

（test是自己建的路径，比如/home/abtroot/study/vue/下建立test，cd到test目录下）
vue init webpack abt
（abt是你的项目名称，cd 到abt目录下）
npm run dev

浏览器输入localhost：8080就可以访问了，搞定（但是，如果这个端口被占用，或者断开还没立即释放，那么VUE可能开启8081、8082等等）

安装JDK（为PyCharm准备）

常规操作，此处不表
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

安装PyCharm

这是官网，此处不表
https://www.jetbrains.com/

关于上述两处安装若有疑问，可参考类比 https://blog.csdn.net/ysgjiangsu/article/details/89553888
此文还指导了chrome的安装

---

开始干活

---

此处申明，搭建Django非本人原创，摘抄自 https://www.cnblogs.com/zhixi/p/9996832.html ，侵删
1.新建Django工程

指定个文件夹，剩下的默认就好了

2.在项目根目录创建后端

cd first
python3 manage.py startapp backend 
（注意啊我是Python3，如果你是Python2，应该这样写）
python manage.py startapp backend 

3.使用vue-cli在根目录创建前端

vue-init webpack frontend

此处有一堆要你确定的东西，此处不表，细节请看：https://blog.csdn.net/ysgjiangsu/article/details/90203286
4.工程一览

5.前端做点事情
修改frontend/src/HelloWorld.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="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>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '一道名菜随便'
      }],
      value: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

你在这里用了element-ui，你得有个说法，是不是！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//添加1
import ElementUI from 'element-ui'
import Vue from 'vue'
import App from './App'
//添加2
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
//添加3
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

切换到前端路径下，安装一下element-ui，不然这里引用也是空谈

cd frontend
npm install element-ui -S

试运行

npm install
npm run dev

没问题了？那就打包吧

npm run build

build完成后，会生成一个dist文件夹，里面有一个 index.html 和一个static文件夹。
前端歇了吧

6.后端Django做点事情
使用Django的通用视图 TemplateView修改静态指向路径（就是让Django访问目录指向我们刚才打包的dist/index.html）
找到项目根 urls.py文件

修改如下：

from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'', TemplateView.as_view(template_name="index.html")),
]

配置Django项目的模板搜索路径和静态文件搜索路径
找到根目录下settings.py文件并打开，找到TEMPLATES配置项，修改如下:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        'DIRS':['frontend/dist'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# Add for vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

看看我们的效果

python3 manage.py runserver

再一次感谢大佬 https://www.cnblogs.com/zhixi/p/9996832.html

PyCharm怎么支持VUE语法

安装插件，字不重要看图


感谢大佬 https://www.cnblogs.com/qunxiadexiaoxiangjiao/p/9367748.html

换主题？

参考webstrom换主题，此处不表 https://blog.csdn.net/ysgjiangsu/article/details/89553888