VUE项目的创建(node.js的安装以及环境变量配置再到VUE项目的创建)
一、node.js的安装
1.node.js的下载
因为需要使用 npm 安装 Vue cli,而 npm 是集成在 Node.js 中的,所以第一步我们需要安装 Node.js,访问官网 https://nodejs.org/en/,首页即可下载。
根据自己的电脑系统情况选择对应的下载。
2.node.js的安装
2.1 打开安装程序如下图,点击下一步
2.2 ,选择需要安装的文件目录,再next,点击 next,就是这个界面。
同样也是下一步。就一直下一步。直到安装完成。(里面应该不重要的,我们快进)。
二、node.js的环境配置
2.1环境变量配置
打开环境变量配置:
path里面选择新增,将自己node.js的安装路径填进去,点击确定。如下图:
配完node.js的环境变量就可以。
2.2验证是否安装成功
打开安装了node.js的盘符下的命令操作板
执行:node -v
如下图,显示版本
再执行:npm -v
如下图
到这里我们的node.js的安装配置就完成了。
2.3安装 cnpm,以及环境配置
选择安装 cnpm,即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快,但是下载的包可能不是最新的。
安装 cnpm 的命令为 :
npm install cnpm -g --registry=https://registry.npm.taobao.org
完成后就可以使用 cnpm 替代 npm 了,我不太喜欢用 cnpm,喜欢用的小伙伴注意一点,cnpm 不要与 npm 混合使用,一个项目用 cnpm 就从头用到底,不要中途敲错命令,否则就会出现混乱。不过万一遇到这种情况也不用慌,把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了,只是比较浪费时间。
环境变量的配置:
如上图配完环境变量后我们输入cnpm -v
进行验证,结果如下图说明安装完成。
全局安装VUE: 执行语句cnpm install vue-cli -g
如下图,说明正在安装。
检查:执行语句vue -V
,结果如下图,说明全局VUE安装成功了。
三、VUE项目的创建以及启动
3.1创建VUE项目
创建一个新的项目文件夹然后在命令执行板输入:vue init webpack 项目名称
然后就是下面界面,前面几个选项回车就好。到下图
这一步开始选择No就好。一直到结束。
到这里,我们的项目就创建完成了。
下面我们还需要两个命令去启动我们的项目:
npm install
这里我用cnpm install的时候报错,好像是有些包装不上,我换成npm install,就可以了。
接下里就是启动项目:
执行命令:npm run dev
结果如下:
这个时候我们的项目就启动了。
打开浏览器访问http://localhost:8080
结果如下
如何停止服务呢?
Ctrl+c 后出现下面操作提示,然后Y同意就停止了服务。
这个时候我们就完成了vue项目的创建,打开你的idea去开发吧。