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

绝地灬酷狼 2022-09-11 14:23 152阅读 0赞

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

**1、安装nodejs**  
[https://nodejs.org/en/][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前端搭建完成  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGFyb2xkXzk2X2x4dw_size_20_color_FFFFFF_t_70_g_se_x_16]  
**备注**：取消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
      // }

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASGFyb2xkXzk2X2x4dw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6e3d822efdaa47648240acd0c418e938.png