从零开始,创建一个VUE项目,详细图文详解。

2020-02-28  本文已影响0人  五花漏Z

一、准备工作

1、安装node

2、安装webpack

二、项目创建步骤

1、去F盘新建一个文件夹,取名叫myproject。打开VScode,将文件夹添加到工作区。右键单击,选择在终端中打开该文件夹。

2、安装脚手架。在终端中输入npm install  vue-cli,回车。

安装完成之后输入 vue -V(注意这里是大写的“V”),如果出现相应的版本号,则说明安装成功。

3、新建一个项目。输入vue init webpack demo1, demo1就是你的项目名称,回车。

在安装时会询问你:

①Project name (demo1);【输入项目名称,回车】

② Project description (A Vue.js project);【输入项目描述,回车】

③Author (wuhualou);作者(wuhualou)。【输入作者名字,回车】

④Vue build (Use arrow keys)>

Runtime + Compiler: recommended for most users(运行时+编译器:大多数用户推荐)

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere;(只运行大约6KB比较轻量的压缩文件,但只允许模板(或任何VUE特定HTML).vue文件需要在其他地方呈现函数。)

【不知道啥意思,回车】

====下面的都是问答Yes、No的方式===

⑤Install vue-router? (Y/n);【问你是否安装的路由?可安可不安,以后也可以再安,输入Y,回车】

⑥Use ESLint to lint your code? (Y/n);【使用ESlint语法?不了解ESLint语法,N,回车】

⑦Setup unit tests with Karma + Mocha? (Y/n);【设置单元测试?不设置,N,回车】

⑧Setup e2e tests with Nightwatch? (Y/n);【Nightwatch建立端到端的测试?不建立,N,回车】

⑨Should we run `npm install` for you after the project has been created? (recommended) npm【使用npm来创建项目?上下键选第一项npm,回车】

项目创建成功,提示你运行项目的命令是 npm run dev

4、进入项目  cd demo1。输入npm run dev,回车。

5、在浏览器打开 http://localhost:8081,就可以看到欢迎页了~

有错误请指出!

求赞~

上一篇下一篇

猜你喜欢

热点阅读