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

1、安装nodejs
https://nodejs.org/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=https://registry.npm.taobao.org

4、启动前端

cd my-vue-project npm run dev

访问http://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// }