一：环境搭建
1.安装Node.js
官网下载：https://nodejs.org/zh-cn/
安装：无脑下一步，安装路径默认即可
2.安装cnpm，用cnpm来替换npm
vue中的npm就像Python中的pip一样
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装vue最新脚手架
cnpm install -g @vue/cli
PS：如果2、3步出错，输入命令:npm cache clean --force清除缓存，再执行2、3两步
二：创建项目
1.创建一个文件夹，并进入该文件夹
image-20200716171305678
2.在该文件夹的路径地址栏输入：cmd，按下回车进入命令行
image-20200716171405430
3.输入命令：vue create luffycity，选择Manually select features
image-20200716172203260
4.通过方向键↑、↓和空格键进行选择，选中：Babel、Router、Vuex，按下回车
image-20200716172253652
5.这里输入y，然后选择In package.json
image-20200716173036330
6.输入n
image-20200716181015547
7.安装ing
image-20200716181059221
8.看到下图红框所示，就是创建成功了
image-20200716181156947
三：文件介绍
1.目录介绍
image-20200716182059777
2..vue文件介绍
image-20200716182433899
四：PyCharm安装Vue.js插件
在安装插件之前，PyCharm里面的vue文件是灰色的黯淡无光的
image-20200716183500249
1.打开PyCharm，点击左上角：File - Settings
image-20200716183042760
2.点击：Plugins，搜索框输入：Vue，点击右侧：Install
image-20200716183614480
3.安装完成后，点击Restart IDE，点击Restart，重启PyCharm
image-20200716183814239
4.vue文件的图标变成了Vue的图标，充满了生机
image-20200716183911732
五：在PyCharm中添加一键启动
1.点击：Add Configuration... - +号 - npm
image-20200716184315171
2.在Scripts的下拉框中选择：serve，点击：apply - OK
image-20200716184509241
3.这时候上方就出现了绿色的三角启动按钮，点击即可启动
image-20200716184616778
4.启动中.....可能会有点慢
image-20200716184709950
5.启动成功，点击即可访问
image-20200716184729098
6.看到这个界面，就说明启动成功了！
image-20200716184851721