搭建vue开发环境的步骤,六步完成

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了搭建vue开发环境的步骤,六步完成相关的知识,希望对你有一定的参考价值。

搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我
一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:http://nodejs.cn;注意是32还是64位;
二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号。

三:淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:npm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

四、搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议,精良不要装在C盘,因为vue下载下来的文件比较大,如果要改盘的话,直接输入D:(或其他盘符)回车就可以直接改盘,

五、然后我们开始创建新的项目输入命令:vue init webpack my-project 回车,my-project是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,
会一直出现如下:
1、Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
2、Project name (vue-test) 直接回车默认
3、Project description (A Vue.js project) 直接回车默认
4、Author 直接回车默认 (作者)
5、Use ESLint to lint your code? n
6、pick an eslint preset. 默认Standard
7、setup unit tests with karma + mocha?No(单元测试不需要)
8、setup e2e tests with Nightwatch?No(单元测试不需要)

六、进入项目 cd my-project (cd 项目名字)


七、安装项目依赖
   npm install

八、安装 vue 路由模块vue-router和网络请求模块vue-resource –save-dev 是你开发时候依赖的东西,–save 是你发布之后还依赖的东西
   npm install vue-router vue-resource –save

六、启动项目
npm run dev

七、发布项目
npm run build

以上是关于搭建vue开发环境的步骤,六步完成的主要内容,如果未能解决你的问题,请参考以下文章

搭建vue开发环境的步骤

搭建vue开发环境的步骤

搭建vue开发环境的步骤

搭建vue开发环境的步骤

vue环境搭建后,简单的单页面切换详细步骤,代码的放置在啥地方

python自动化自动化测试平台开发:8.前端开发实战上之环境搭建