Django+vue.js+element-ui 开发一

工具：

pycharm,mysql,django,vue.js

安装步骤：

pycharm官网下载安装，然后百度破解办法，网上有多

MySQL安装搭载navicat,百度

django安装百度：

pip install django==1.8.6

创建django项目：

django-admin startproject myproject

cd myproject

django-admin startapp project

vue开发：

下载node.js，网址如下：

https://nodejs.org/en/

我选择了.msi下载，然后一路next,傻瓜式安装。

打开管理员cmd,输入node --version（node -v）获取node的版本号。

输入npm --version获取npm（npm -v）版本号

安装淘宝镜像cnpm  ,网址：http://npm.taobao.org/，然后以后安装可以直接用cnpm install [name]

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli,看一下这个网址：https://cloud.tencent.com/developer/article/1005607

搭建vue.js的前端项目

vue-init webpack appfront

然后cd appfront,执行npm run dev

然后打开http://localhost:8080,看到如下的图片即项目成功。

 安装element-ui,查看官方网址：http://element-cn.eleme.io/#/zh-CN/component/installation

进入项目中执行命令

安装css依赖:

cnpm install style-loader 
cnpm install css-loader 
cnpm install file-loader 

安装less依赖:

npm install less less-loader 

修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的css和js,less:

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.css$/,

loader: "style-loader!css-loader",

},

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

 

npm i element-ui -S

引入Element，前面已经全局安装了element-ui，只需要在Vue项目中引入即可

1、打开项目：src/main.js,添加下面三条
      import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   Vue.use(ElementUI)

然后在.vue文件里就直接可以用了.