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:还有问题,请评论出来。我会给你一一解答。