django前后端分离开发（二）——前端搭建

admin管理员组

文章数量:1794759

django前后端分离开发（二）——前端搭建

django前后端分离开发（二）——前端搭建

1、安装nodejs nodejs/en/ 2、安装vue

npm install -g vue-cli

验证

vue -V

3、创建前端项目目录 首先，跳转到准备放项目的文件夹，然后shift+鼠标右键，选择‘在此处打开命令窗口’，在终端输入：

vue init webpack my-vue-project #注释 #1 Project name (my-vue-project) --项目名称，如果不想改，直接回车 #2 Project description(A Vue.js project) --项目描述，如果不想改，直接回车 #3 Author (24439...) --项目作者，如果不想改，直接回车 #4 Vue build (Use arrow keys) --是否需要安装编译器，我们选择安装，直接回车 #5 Install vue-router (Y/n) --是否需要安装vue-router路由管理，我们选择安装，直接回车 #6 Use ESLint to lint your code? (Y/n) --安装eslint检查语法，我选择不安装，按n，再按回车（如果安装，按回车） #7 Setup unit tests? (Y/n) --安装单元测试，我选择不安装，按n，再按回车 #8 Setup e2e tests with Nightwatch? (Y/n) --还是关于测试，我选择不安装，按n，再按回车 #安装需要联网，如果npm被墙，请使用cnpm安装 npm install cnpm -g --registry=registry.npm.taobao

4、启动前端

cd my-vue-project npm run dev

访问localhost:8080/#/，出现如下界面代表nodejs+webpack+vue-cli前端搭建完成 备注：取消es语法检查 在vue的build目录下webpack.base.conf.js文件中注释掉如下内容

// test: /\\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // formatter: require('eslint-friendly-formatter'), // emitWarning: !config.dev.showEslintErrorsInOverlay // }

本文标签： 后端django