vue项目环境搭建以及生成一个vue项目

最新推荐文章于 2022-09-14 09:51:06 发布

静待_花开

最新推荐文章于 2022-09-14 09:51:06 发布

阅读量181

点赞数

分类专栏： jsp

本文链接：https://blog.csdn.net/qq_42747738/article/details/103685191

版权

3 篇文章 0 订阅

订阅专栏

一：使用vue首先要知道几个东西

管理项目中引用的包，感觉有点像后端的maven

以前引用包是使用<script src="">来引用，现在只需要运行npm install ....就可以了

帮助搭建项目结构，就和后端使用eclipse，idea搭建环境一样（实际上没有这些东西自己也能搭建起来，就是要求比较高）

（当然他不只是能运行vue还有许多语言也能运行在他上面）由于 .vue结尾的文件不能直接运行在浏览器上所以需要一个环境来运行它，有点像java的jvm虚拟机

想要深入了解可以看看《深入浅出node.js》这个书，相信会有新的认知

1，因为node是vue的运行时环境，因此先安装node（会默认安装npm）

进入官网https://nodejs.org/en/download/ （进入官网都不是下面页面的，点击上面download就可以跳转到这页面）点击Windows（.msi）的64位安装

下载好之后点击安装，一直下一步就好，完成后再cmd中分别运行node -v，npm -v能正常显示版本号便是安装成功

接下来如果你不想将日志和npm安装的包放在c盘（C:\Users\用户名\AppData\Roaming\npm），可以跟着做下面的，如果放在默认路径c盘没关系，下面不配置也可以。

例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我的安装目录下创建两个文件夹【node_global】及【node_cache】

设置全局目录和缓存目录，创建完两个空文件夹之后，打开cmd命令窗口，输入

将下面两处的路径换为自己的文件路径

npm config set prefix "D:\NodeJS\node_global"

npm config set cache "D:\NodeJS\node_cache"

在自己的node_global目录下创建一个node_modules文件夹，然后进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入D:\NodeJS\node_global\node_modules。【Path】添加D:\NodeJS\node_global

注意路径换成自己的

2，vue-cli安装只需要执行下面命令就可以了如果速度慢可以使用阿里的仓库执行

npm install -g cnpm --registry=https://registry.npm.taobao.org（以后执行命令需要在将npm换成cnpm,不然下载的仓库还是国外的速度还是慢）

npm install -g @vue/cli
如果你将仓库换成了阿里的 可以执行下面命令
cnpm install -g @vue/cli

到这里环境就搭建完成了

执行

vue create 项目名  或者  vue init webpack项目名 来生成项目

注意 vue create 是vue-cli3.x的初始化方式，vue init 是vue-cli2.x的初始化方式

输入回车后如果替换了阿里的仓库会提示是否使用阿里的仓库输入Y就好了

之后具体选择什么配置就自己选择就好可以参考

生成后 cd 进入项目所在文件夹执行 npm run serve就可以了（不能执行 Dev start默认没有配置需要自己配置）

在浏览器输入 http://localhost:8080就可以看到创建好的程序了

关注