django前后端分离开发(二)——前端搭建
1、安装nodejs
https://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=https://registry.npm.taobao
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
// }
更多推荐
django前后端分离开发(二)——前端搭建
发布评论