一:环境搭建

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

image-20200716171305678

2.在该文件夹的路径地址栏输入:cmd,按下回车进入命令行

image-20200716171405430

image-20200716171405430

3.输入命令:vue create luffycity,选择Manually select features

image-20200716172203260

image-20200716172203260

4.通过方向键空格键进行选择,选中:BabelRouterVuex,按下回车

image-20200716172253652

image-20200716172253652

5.这里输入y,然后选择In package.json

image-20200716173036330

image-20200716173036330

6.输入n

image-20200716181015547

image-20200716181015547

7.安装ing

image-20200716181059221

image-20200716181059221

8.看到下图红框所示,就是创建成功了

image-20200716181156947

image-20200716181156947

三:文件介绍

1.目录介绍

image-20200716182059777

image-20200716182059777

2..vue文件介绍

image-20200716182433899

image-20200716182433899

四:PyCharm安装Vue.js插件

在安装插件之前,PyCharm里面的vue文件是灰色的黯淡无光的

image-20200716183500249

image-20200716183500249

1.打开PyCharm,点击左上角:File - Settings

image-20200716183042760

image-20200716183042760

2.点击:Plugins,搜索框输入:Vue,点击右侧:Install

image-20200716183614480

image-20200716183614480

3.安装完成后,点击Restart IDE,点击Restart,重启PyCharm

image-20200716183814239

image-20200716183814239

4.vue文件的图标变成了Vue的图标,充满了生机

image-20200716183911732

image-20200716183911732

五:在PyCharm中添加一键启动

1.点击:Add Configuration... - +号 - npm

image-20200716184315171

image-20200716184315171

2.在Scripts的下拉框中选择:serve,点击:apply - OK

image-20200716184509241

image-20200716184509241

3.这时候上方就出现了绿色的三角启动按钮,点击即可启动

image-20200716184616778

image-20200716184616778

4.启动中.....可能会有点慢

image-20200716184709950

image-20200716184709950

5.启动成功,点击即可访问

image-20200716184729098

image-20200716184729098

6.看到这个界面,就说明启动成功了!

image-20200716184851721

image-20200716184851721