python+django+vuejs学习（一）

在创建的项目中添加新的APP(即类似springMVC中的模块)

在Terminal窗口输入：python manage.py startapp appfront回车

appfront是新创建的模块的名称。

电脑安装配置好vue

vue脚手架安装配置：https://www.jianshu.com/p/46e9df18413d

如果之前安没安装忘记了

可以在pycharm的Terminal窗口，输入：vue --version或vue -V，如果如下图显示版本号了，就说明安装了，否则就没有

如果没有参照vue cli安装方法：https://cli.vuejs.org/zh/guide/installation.html

如果安装完成

自可以使用

添加前段app

 

如果未安装vue以及vue-cli脚手架

则1.先安装node

方法一：现在电脑中安装node:可参考：https://www.jetbrains.com/help/pycharm/vue-js.html

 可以通过查询版本测试是否安装成功。

方法二：在pycharm中安装插件可以使用：

同样可以在terminal下测试是否安装node成功

 2.接下来安装vue和脚手架

详细可以参考：https://segmentfault.com/a/1190000008922234 很详细的文档

pycharm官方安装页面：https://www.jetbrains.com/help/pycharm/vue-js.html

安装git-->执行一下操作

先查看安装的node和npm 版本确定其安装成功。

# 升级或安装 cnpm
(使用淘宝镜像）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

------>

本人使用的淘宝镜像

使用官方：404周不到--因为此时未安装vul-cli 故找不到对应的更新（之后会用）

安装vue

安装脚手架：

此处出现了警告，coffee-script依赖被移动过

此处解决方案如上。

npm install -g @vue/cli  #用于更新包
npm uninstall vue-cli -g 或 yarn global remove vue-cli  #用于卸载包

此时我执行vue -v 依旧找不到，故我执行了 更新包

之后执行vue -v发现，貌似语法错了

没有vue -v 的选择，只有vue -V （￣□￣｜｜）

 

此时可以创建新的模块了

执行如下：

此时提示我之前安装过公用的vue init，尝试更新

>npm install -g @vue/cli-init  #vue init更新语句

详解可参考：

Project name (my-project) # 项目名称（我的项目）
Project name my-project # 项目名称我的项目
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Project description A Vue.js project # 项目说明一个 Vue.js 项目
Author (Pat <gouqingping@yahoo.com>) # 作者 （Pat <gouqingping@yahoo.com>）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）
Use ESLint to lint your code? Yes # 使用 ESLint 到你的代码？ 是
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint（使用箭头键）
Pick an ESLint preset Standard # 选择一个预置ESLint标准
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha？ （Y/ N）
Setup unit tests with Karma + Mocha? Yes # 设置单元测Karma + Mocha？是
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试，Nightwatch？ （Y/ N）
Setup e2e tests with Nightwatch? Yes # 设置端到端测试，Nightwatch？ 是

最后生成 Vue.js 的webpack 项目
vue-cli · Generated "my-project". # VUE-CLI·生成“我的项目”。
To get started: # 开始：
cd my-project # CD我的项目
npm install # NPM安装
npm run dev # NPM运行开发
#参考文档：https://blog.csdn.net/sinat_29412671/article/details/53690658

查找之余，项目已经添加完成

之后在django项目中出现一个新的模块：

之后按照上面创建的提示：

cd appfront #进入vue项目中

npm run dev #启动 Dev

提示成功：

同时会提示一个路径：点击路径或者在浏览器中输入该路径

如果为上图提示，则表明成功。

推荐一篇特别详细的文档：https://blog.csdn.net/youxianzide/article/details/86480683