从零开始搭建vue开发环境及构建vue项目 手把手教你用vue-cli搭建vue项目

1.安装node.js
安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的
node.js版本
node.js自带npm(包管理)安装完成之后,npm本地仓库默认在 C:\Users\Administrator\AppData\Roaming 目录下。注:有
的电脑会自己隐藏文件夹,可以复制上面的目录地址在自己电脑上直接进入。看到如下图的两个文件夹:npm和npm-cache
接下来就是将上面的npm和npm-cache移动到node.js的安装目录下
2.改变npm本地仓库地址
先找到自己的node.js安装目录,不记得安装目录的,可以在dos窗口输入where node查看
现在在node.js目录下手动新建两个名字为node_cache和node_global空文件夹,注意是空的文件夹
输入命令移动文件夹:cmd中执行npm config set prefix "D:\Program Files\nodejs\node_global"回车,然后继续执行命
令npm config set cache "D:\Program Files\nodejs\node_cache"。命令里面的目录写自己刚在nodejs安装目录下创建的
node_cache和node_global目录

3.配置淘宝镜像站
4.安装VUE
在cmd窗口输入全局安装vue命令npm install vue -g进行安装,正常第一次安装应该是执行命令后出现added 1 package,安
装完成之后可以在node.js/node_global/node_modules下面找到vue目录,dist(distribution)是最终发布的产品,最后vue项目打
包发布会生成一个这样的dist文件给我们来发布,这个后面写部署的时候补上说明。
安装vue-router,这个差不多是使用vue开发很常用的,所以一般使用全局安装。在cmd窗口输入命令npm install vue-
router -g进行安装,安装完成之后同样可以在node.js/node_global/node_modules下面找到vue-router目录。跟上面vue目录同级
安装脚手架:在cmd窗口输入命令npm install vue-cli -g并执行。
5.构建一个新的VUE项目
在cmd窗口到达项目目录后,继续执行命令vue init webpack vueDemo来新建项目(vueDemo为项目名称)
继续按Enter键,项目开始构建,
“Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车

“Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成
相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。

“Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N”

这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们
就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader
.初始化项目:在cmd窗口到达项目路径下这里的项目路径是上一步中的project Name下,就是要到你的项目下,去运行项目
,执行命令npm install
运行项目:继续在上图的窗口中执行命令cnpm run dev
运行完毕会出现项目的地址

部分内容参考

手把手教你用vue-cli搭建vue项目

猜你喜欢

转载自www.cnblogs.com/lesliecn/p/10505396.html