Vue基础环境搭建

1、如果本机没有安装node运行环境,请下载node 安装包进行安装(地址:https://nodejs.org/zh-cn/)

2、安装成功后再cmd中输入node -v 、npm -v检查是否按安装成功,显示版本号则安装成功

3、npm是node一起安装的包管理工具,npm再国内下载是很慢的,则可以选择cnpm(淘宝镜像),

使用cnpm之前需要安装在cmd中输入npm install  -g cnpm安装,-g代表全局安装

4、安装vue-cli脚手架,同样在cmd中输入npm install -g vue-cli或者安装了cnpm的也可以输入cnpm install -g vue-cli(同样-g代表全局)

5、这样vue环境已经完成。接下来新建一个vue的项目

6、cmd输入:vue init webpack vueName(vueName就是项目文件夹的名字);

(温馨提示,cmd中的路径就是你要新建项目的文件夹位置)

7、下图输入的才是项目名称,项目名称只能输入小写或者_之类的;

第二个是项目描述,可减可填可不填,不填就直接回车;

第三个就是作者信息,同上,不填就回车

8、选择Runtime + Compiler:recommended for most users   (建议大多数用户)

9、是否安装vue-router(路由)输入y或者是n,y是安装,n是不安装,在这里不安装的话,需要等你再新建完项目后

自己去用npm install vue-router单独安装才可以。通常都是安装上的。

10、是否安装ESLint,建议输入n,我们这里选择n,有兴趣挑战的朋友也可以选择安装输入y;

温馨提示:ESLint是语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

11、是否建议单元测试,选择y,然后就选则Karma and Mocha

12、Setup e2e tests with Nightwatch?输入y,到这里就差不多是完成了项目的初步建立,

再询问是否已经安装npm install的时候我们选择No,I will handle that myself

发现再csnd文件夹内已经创建了一个vueName的文件夹,说明新建成功,我们还需要安装依赖

13、安装依赖需要进入项目的文件夹

14、进入到项目文件夹内就直接可以安装依赖了,输入npm install,回车就开始下载依赖了。

15、下载完成后就发现项目中的node_modules这个文件夹内的文件都是刚才npm install所下载项目需要的全部依赖

16、这样我们项目算是全部新建成功了。现在我们要跑一下项目,再当前路径输入npm run dev则就可以启动项目了。

打开浏览器,输入上图的地址就可以看到vue的页面了。如需再启动后自动打开浏览器则需要再配置文件下去打开

autoOpenBrowser默认是false,改为true,每次运行就可以自动打开浏览器了。

最后新建完成项目的界面,看到下图的界面就证明你已经成功:

PS:还有问题,请评论出来。我会给你一一解答。

猜你喜欢

转载自blog.csdn.net/g695161802/article/details/80648345