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

Django+vue.js+element-ui 开发一_第1张图片

然后cd appfront,执行npm run dev

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

Django+vue.js+element-ui 开发一_第2张图片

 安装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文件里就直接可以用了. 

你可能感兴趣的:(Django+vue.js+element-ui 开发一)