Vue.js环境安装步骤:
1. node.js下载:
打开浏览器搜索node.js官网,点击第二个导航栏download,点击Windows Installer会弹出下载框下载
下载完成之后安装,安装时等待一会会弹出框然后点Next,路径默认存在C盘,一直点Next继续安装。
安装完成之后打开DOS窗口,也可以使用快捷键win+R,你会发现 运行框中有个cmd,这时候直接回车就好
这时候我们输入node然后回车进入node交互模式
我们在运行框中输入node –v回车这时候会出现对应的node.js版本
输入 npm–v也会显示出npm的版本信息
这个时候就说明我们的node环境已经安装完成,npm包管理器也有了
2. 安装cnpm
由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm
3. 安装vue-cli脚手架构建工具
在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
安装好之后我们就可以接下来就开始使用vue-cli来构建项目。要创建项目,首先我们要选定目录,然后再命令行中把目录转到选定的目录。在这里我把我的文件创在了C盘下,所以我们需要在运行框中将目录改变到我的文件夹目录,然后在命令行中运行命令 vue init webpack vue
运行初始化命令的时候回会让用户输入几个基本的选项,项目名称,描述,作者等信息,括号里会有提示,如果不想填直接回车默认括号里的内容就好,一直到需要用户选择yes和no时,这时候选择为如上图所示,最后一个选项直接回车默认第一个选项,接下来我们就等待进度完成再进行下一步
执行完上面这一步我们就可以按照运行框中的提示进行下一步了
4. 运行项目
项目运行成功后我们打开浏览输入http://localhost:8080地址就可以看到下图画面,如果要中止项目的话按键盘ctrl+C会出现询问要终止批处理操作吗,这时候键盘输入Y后回车就可以继续操作了
为了避免以后重复次数,所以我在这里就一次性装好所需要的
5.安装json和resource和router
5. 安装vue develop tools
下载参考网址:https://www.cnblogs.com/tanyongli/p/7554045.html
先在github下载devtools源码,地址为:https://github.com/vuejs/vue-devtools,将下载好的压缩包解压到自己新建的文件夹下,之后在运行框中将路径转到文件夹下的vue-devtools-master,执行cnpm install之后回车,可以看到如下图所示就可以执行下一步了
然后执行npm run build
完成之后文件夹会多出这个文件
在自己新建的文件目录下找到chrome目录下的mainifest.json中的并修改其中的一处persistant为true
打开谷歌浏览器的设置--->扩展程序--à勾选开发者模式
shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器
打开一个已有的vue项目,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式:发现vue.js is not detected
可以修改一下webpack.config.js的代码如下:
然后我们重启一下vue项目就可以使用了