搭建Vue脚手架(vue-cli)并创建一个项目

637 阅读3分钟

blog.csdn.net/inthuixiang…

cli.vuejs.org/zh/guide/in…

安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本

vue --version
# or
vue -V

升级

如需升级全局的 Vue CLI 包,请运行:

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

创建项目

vue init webpack vue-demoName

运行项目

cnpm run dev

注意:如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用了(默认服务启动的是本地的8080端口),可以通过修改一下配置文件 config>index.js里的端口号

这里写图片描述

4、后续其它步骤—打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

附:部分文件功能介绍(网上找的图片)
这里写图片描述

快速原型开发

vue create创建项目

cli.vuejs.org/zh/guide/cr…

运行以下命令来创建一个新项目:

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

CLI 预览

这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。

CLI 预览

如果你决定手动选择特性,在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。我们会在下一个章节讨论 preset 和插件。

~/.vuerc

被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项,可以编辑这个文件。

在项目创建的过程中,你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源

以更快地安装依赖。这些选择也将会存入 ~/.vuerc

vue create 命令有一些可选项,你可以通过运行以下命令进行探索:

vue create --help


用法:create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项:

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化,并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

图形化界面预览

vue 2.0 与 vue3.0 区别

vue2.0 

vue run-script serve
vue run-script build

vue 3.0

vue serve
vue build