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
  // }