开发vue用什么ide_VUE项目开发前期需要准备和配置些什么环境?
VUE项目开发前期需要准备和配置些什么环境?Node环境下载:https://nodejs.org/en/,安装在G盘npm包管理工具(package manager)自动安装完成。使用npm安装vue先使用CMD安装 npm install vue提示:更换用vue-cli安装安装: 1、npm install --global vue-cli(安装默认版本) ; 2、npm install -
![921bd9e995d3335846a1649da4d1b477.png](https://i-blog.csdnimg.cn/blog_migrate/3918121ecb5c55de46c99c702aff0417.jpeg)
VUE项目开发前期需要准备和配置些什么环境?
![f182f27baaedd310d4a251b736a92dbd.png](https://i-blog.csdnimg.cn/blog_migrate/699e72d888ba2bfc3297b556de7350d4.jpeg)
Node环境
下载:https://nodejs.org/en/,安装在G盘
![68057406e5b96958bfcb8cb8223c2099.png](https://i-blog.csdnimg.cn/blog_migrate/d40a0fabafc46d17765901e259dcbe94.jpeg)
npm包管理工具(package manager)自动安装完成。
![fe0a4a2cad682060d5673bfdcae42265.png](https://i-blog.csdnimg.cn/blog_migrate/e40845af607952aeda02490162fe08de.jpeg)
使用npm安装vue
先使用CMD安装 npm install vue
提示:
![5a9b5474f1231dddc3088fdc9d1e698f.png](https://i-blog.csdnimg.cn/blog_migrate/494bcb68f730f2d422238b6e433ee19e.jpeg)
更换用vue-cli安装安装:
1、npm install --global vue-cli(安装默认版本) ;
![86c1e3f2836949255247d5f083dbac2d.png](https://i-blog.csdnimg.cn/blog_migrate/47423699b673e78218024ee6d5cc2e6e.jpeg)
2、npm install -g @vue/cli (安装最新版本)【推荐】
![ca0e928d2d0c708c9633c5777c8e307e.png](https://i-blog.csdnimg.cn/blog_migrate/350e2b6610d246ba2c8dbda45c520ebf.jpeg)
(建议先在熟悉 Vue 本身之后再使用 CLI)
![de095f7ff200da979c27ec042705c034.png](https://i-blog.csdnimg.cn/blog_migrate/4ef91df130d9edcb0c92e617bf8244e3.jpeg)
vue-devtools浏览器双向绑定
Chrome(失败)下载:https://github.com/vuejs/vue-devtools#vue-devtools
换为火狐:附加组件 - 插件 - 搜索“vue-devtools”,添加
![f939c929795e0bbc1a50f8264cf6a793.png](https://i-blog.csdnimg.cn/blog_migrate/44fd8ed9c41cee029f1a220d50219f31.jpeg)
![8ed0423fcfcdfdd659f62c13fec38544.png](https://i-blog.csdnimg.cn/blog_migrate/11ad284a7659d9debae285fce3c956d5.jpeg)
![12ab89ea2e58f393ce224b64e047027f.png](https://i-blog.csdnimg.cn/blog_migrate/b0fbaf082f274aec64f92c34b544ab01.jpeg)
IDE安装:Visual Studio Code
![11b87c7b769d000fcb05030c6dc1c320.png](https://i-blog.csdnimg.cn/blog_migrate/13380d34660ad19f8216920c0f234000.jpeg)
及安装vue的扩展
Babel安装
安装:npm install -g babel-cli(必须全局安装)
![a3e523d50c5f7d5dfcf2f66058e648fc.png](https://i-blog.csdnimg.cn/blog_migrate/7a5b2a49639ff500370ea70fada54e48.jpeg)
![eb90a6bbe9c346322c469e36c34f6c9d.png](https://i-blog.csdnimg.cn/blog_migrate/cf50a934e688d3bdcc1ee0b3b71570a1.jpeg)
Webpack开源前端打包工具安装
![55b4e3d3cd864c46885a442455128301.png](https://i-blog.csdnimg.cn/blog_migrate/df7471cc4b1530f72376e40b49edaf35.jpeg)
好了,基本需要安装和配置的环境已经搭建完成了。接下来就可以开始搭建第一个VUE项目了。
声明:图片原创,禁止使用。
更多推荐
所有评论(0)