前后端分离项目开始 vue环境搭建(图解)
2021/7/3 6:22:38
本文主要是介绍前后端分离项目开始 vue环境搭建(图解),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一:环境搭建
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.创建一个文件夹,并进入该文件夹
2.在该文件夹的路径地址栏输入:cmd
,按下回车进入命令行
3.输入命令:vue create luffycity
,选择Manually select features
4.通过方向键↑
、↓
和空格键
进行选择,选中:Babel
、Router
、Vuex
,按下回车
5.这里输入y
,然后选择In package.json
6.输入n
7.安装ing
8.看到下图红框所示,就是创建成功了
三:文件介绍
1.目录介绍
2..vue
文件介绍
四:PyCharm安装Vue.js
插件
在安装插件之前,PyCharm里面的vue文件是灰色的黯淡无光的
1.打开PyCharm,点击左上角:File - Settings
2.点击:Plugins,搜索框输入:Vue
,点击右侧:Install
3.安装完成后,点击Restart IDE
,点击Restart
,重启PyCharm
4.vue文件的图标变成了Vue的图标,充满了生机
五:在PyCharm中添加一键启动
1.点击:Add Configuration... - +号 - npm
2.在Scripts
的下拉框中选择:serve
,点击:apply - OK
3.这时候上方就出现了绿色的三角启动按钮,点击即可启动
4.启动中.....可能会有点慢
5.启动成功,点击即可访问
6.看到这个界面,就说明启动成功了!
这篇关于前后端分离项目开始 vue环境搭建(图解)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist