使用Vue-CLI创建Vue项目

在看本文之前,请确保电脑上已经装了node,关于node的安装和使用可参考node的安装与使用专栏

1 . 利用Vue-CLI初始化构建Vue项目时,我们将会获得一个初始的文件夹结构,如下所示:
在这里插入图片描述
2 . 安装Vue-CLI

npm install -g @vue/cli
或
yarn global add @vue/cli

例:
在这里插入图片描述
3 . 使用vue --versionvue -V指令,查看是否安装成功

例:
在这里插入图片描述
4 . 创建项目

vue create [project](项目名称)

例:使用vue create [project](项目名称)命令时(选择手动配置,键盘上下键即可切换,如果喜欢使用eslint可以选择default默认)
在这里插入图片描述

5 .安装CLI插件以及一些依赖项。 这可能需要一段时间…

如果遇到如下页面,可选择Linter/Formatter(按空格键选中),下一步选择默认,在需要输入(Y/N)的地方,选择Y,回车即可
在这里插入图片描述
6 .创建完成
在这里插入图片描述
7 .根据提示输入cd [ project ](项目名称)

例:
在这里插入图片描述
8 .根据提示输入运行命令npm run serve
在这里插入图片描述

9 .启动完成,在浏览器网址栏输入http://localhost:8080,此时就能看到我们初始化的Vue的项目了
在这里插入图片描述

10 .我们可以通过命令vue ui,使用vue的GUI界面来管理自己的项目

例:使用vue ui 命令时
在这里插入图片描述
此时,会自动弹出如下界面(我们可根据提示导入自己的项目即可使用)
在这里插入图片描述

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页