一:环境搭建
1.安装Node.js
安装:无脑下一步,安装路径默认即可
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](https://gitee.com/xuexianqi/img/raw/master/img/20200716171307.png)
2.在该文件夹的路径地址栏输入:cmd
,按下回车进入命令行
![image-20200716171405430](https://gitee.com/xuexianqi/img/raw/master/img/20200716171406.png)
3.输入命令:vue create luffycity
,选择Manually select features
![image-20200716172203260](https://gitee.com/xuexianqi/img/raw/master/img/20200716172204.png)
4.通过方向键↑
、↓
和空格键
进行选择,选中:Babel
、Router
、Vuex
,按下回车
![image-20200716172253652](https://gitee.com/xuexianqi/img/raw/master/img/20200716172254.png)
5.这里输入y
,然后选择In package.json
![image-20200716173036330](https://gitee.com/xuexianqi/img/raw/master/img/20200716173037.png)
6.输入n
![image-20200716181015547](https://gitee.com/xuexianqi/img/raw/master/img/20200716181016.png)
7.安装ing
![image-20200716181059221](https://gitee.com/xuexianqi/img/raw/master/img/20200716181100.png)
8.看到下图红框所示,就是创建成功了
![image-20200716181156947](https://gitee.com/xuexianqi/img/raw/master/img/20200716181158.png)
三:文件介绍
1.目录介绍
![image-20200716182059777](https://gitee.com/xuexianqi/img/raw/master/img/20200716182101.png)
2..vue
文件介绍
![image-20200716182433899](https://gitee.com/xuexianqi/img/raw/master/img/20200716182435.png)
四:PyCharm安装Vue.js
插件
在安装插件之前,PyCharm里面的vue文件是灰色的黯淡无光的
![image-20200716183500249](https://gitee.com/xuexianqi/img/raw/master/img/20200716183501.png)
1.打开PyCharm,点击左上角:File - Settings
![image-20200716183042760](https://gitee.com/xuexianqi/img/raw/master/img/20200716183043.png)
2.点击:Plugins,搜索框输入:Vue
,点击右侧:Install
![image-20200716183614480](https://gitee.com/xuexianqi/img/raw/master/img/20200716183615.png)
3.安装完成后,点击Restart IDE
,点击Restart
,重启PyCharm
![image-20200716183814239](https://gitee.com/xuexianqi/img/raw/master/img/20200716183815.png)
4.vue文件的图标变成了Vue的图标,充满了生机
![image-20200716183911732](https://gitee.com/xuexianqi/img/raw/master/img/20200716183912.png)
五:在PyCharm中添加一键启动
1.点击:Add Configuration... - +号 - npm
![image-20200716184315171](https://gitee.com/xuexianqi/img/raw/master/img/20200716184316.png)
2.在Scripts
的下拉框中选择:serve
,点击:apply - OK
![image-20200716184509241](https://gitee.com/xuexianqi/img/raw/master/img/20200716184510.png)
3.这时候上方就出现了绿色的三角启动按钮,点击即可启动
![image-20200716184616778](https://gitee.com/xuexianqi/img/raw/master/img/20200716184617.png)
4.启动中.....可能会有点慢
![image-20200716184709950](https://gitee.com/xuexianqi/img/raw/master/img/20200716184711.png)
5.启动成功,点击即可访问
![image-20200716184729098](https://gitee.com/xuexianqi/img/raw/master/img/20200716184730.png)
6.看到这个界面,就说明启动成功了!
![image-20200716184851721](https://gitee.com/xuexianqi/img/raw/master/img/20200716184852.png)
posted @
2020-07-16 18:27
轻描丨淡写
阅读(
374)
评论()
编辑
收藏
举报