在我们系列的第三部分中，我们将使用 Vue.js 框架来创建一个简单的项目，以演示如何轻松实现这一点。
创建一个 Vue 3 项目
要创建一个新的 Vue 3 项目，我们将使用以下命令：
[[email protected] ~]# vue create lwvuejs-default （lwvuejs-default 代表项目名称）
该项目是这样命名的，因为我们将使用默认预设选项。 如果跟随，您可以随意命名您的项目。 上面的命令应该为我们提供如下图所示的输出：
Vue CLI v3.0.5 ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features 由于我们没有配置任何自定义预设，因此上面的输出仅允许我们选择默认配置。 如果部署了其他自定义预设，它们将在此处可见。
接下来，我们按’Enter’ 然后继续创建项目。 片刻之后，“create”命令的输出应该类似于以下活动：
Vue CLI v3.0.5 ✨ Creating project in /home/temp/public_html/lwvuejs-default. ⚙ Installing CLI plugins. This might take a while... > [email protected] install /home/temp/public_html/lwvuejs-default/node_modules/yorkie > node bin/install.js setting up Git hooks Done > [email protected] postinstall /home/temp/public_html/lwvuejs-default/node_modules/core-js > node postinstall || echo "ignore" > [email protected] postinstall /home/temp/public_html/lwvuejs-default/node_modules/ejs > node ./postinstall.js added 1195 packages from 930 contributors and audited 24076 packages in 21.084s found 0 vulnerabilities ? Invoking generators... ? Installing additional dependencies... added 36 packages from 29 contributors, updated 2 packages, moved 9 packages and audited 24363 packages in 8.684s found 0 vulnerabilities ⚓ Running completion hooks... ? Generating README.md... ? Successfully created project lwvuejs-default. ? Get started with the following commands: $ cd lwvuejs-default $ npm run serve [[email protected] public_html]#如果一切顺利并且没有出现错误，我们可以将目录更改为我们的新项目文件夹。
[[email protected] public_html]# cd lwvuejs-default/ [[email protected] lwvuejs-default]# 如果我们列出文件夹的内容，它应该类似于：
[[email protected] lwvuejs-default]# ll total 488 -rw-r--r-- 1 lwvuejs lwvuejs 53 Nov 19 18:17 babel.config.js drwxr-xr-x 819 lwvuejs lwvuejs 28672 Nov 19 18:17 node_modules -rw-r--r-- 1 lwvuejs lwvuejs 913 Nov 19 18:17 package.json -rw-r--r-- 1 lwvuejs lwvuejs 443119 Nov 19 18:17 package-lock.json drwxr-xr-x 2 lwvuejs lwvuejs 4096 Nov 19 18:17 public -rw-r--r-- 1 lwvuejs lwvuejs 277 Nov 19 18:17 README.md drwxr-xr-x 4 lwvuejs lwvuejs 4096 Nov 19 18:17 src [[email protected] lwvuejs-default]# 这将类似于我们在旧 CLI 版本中的文件列表。 如果我们使用 cat 命令检查 package.json 文件的内容，我们应该会看到以下内容：
@vue/cli-plugin-：这个输出显示默认预设使用的插件是 babel 和 eslint，如前所述。
@vue/cli-service-：此输出表明名为 vue CLI 服务的二进制文件已安装在我们的项目中。 这个二进制文件用于启动本地开发服务器，构建我们的应用程序以进行生产，或检查 webpack 配置文件。
开发服务器
接下来，我们将启动一个开发服务器。 我们可以使用以下命令来完成此操作：
[[email protected] lwvuejs-default]# npm run serve > [email protected] serve /home/temp/public_html/lwvuejs-default > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin DONE Compiled successfully in 2378ms 6:37:57 PM App running at: - Local: https://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build. 此命令应提供与上述活动类似的输出。
仅当您在本地计算机上安装和使用 vue JS 时，开发环境才适用。 输入上述命令后，您可以浏览到链接 https://localhost:8080/，您应该会在浏览器中看到如下界面：
如果您收到错误“无法访问此站点”，请仔细检查您的防火墙以确保端口 8080 已打开。
使用 ESLINT 调试应用程序
基本代码调试是通过发出以下命令完成的：
[[email protected] lwvuejs-default]# npm run lint 如果没有看到错误，输出应如下所示：
[[email protected] lwvuejs-default]# npm run lint > [email protected] lint /home/temp/public_html/lwvuejs-default > vue-cli-service lint DONE No lint errors found! [[email protected] lwvuejs-default]# 如果有任何错误，它将类似于下图中的错误。
为现场制作服务器构建应用程序
要为实时生产服务器构建应用程序，我们可以使用以下命令：
[[email protected] lwvuejs-default]# npm run build > [email protected] build /home/temp/public_html/lwvuejs-default > vue-cli-service build ⠸ Building for production... DONE Compiled successfully in 4175ms 3:00:49 PM File Size Gzipped dist/js/chunk-vendors.deb8a740.js 82.98 KiB 29.99 KiB dist/js/app.442d56b7.js 4.64 KiB 1.66 KiB dist/css/app.e2713bb0.css 0.33 KiB 0.23 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html [[email protected] lwvuejs-default]# 片刻之后，构建应该为生产服务器编译应用程序并在我们的项目目录中创建名为 dist 的文件夹。
[[email protected] lwvuejs-default]# ll total 492 -rw-r--r-- 1 root root 53 Nov 19 18:17 babel.config.js drwxr-xr-x 5 root root 4096 Nov 20 15:00 dist drwxr-xr-x 820 root root 28672 Nov 19 18:37 node_modules -rw-r--r-- 1 root root 913 Nov 19 18:17 package.json -rw-r--r-- 1 root root 443119 Nov 19 18:17 package-lock.json drwxr-xr-x 2 root root 4096 Nov 19 18:17 public -rw-r--r-- 1 root root 277 Nov 19 18:17 README.md drwxr-xr-x 4 root root 4096 Nov 19 18:17 src [[email protected] lwvuejs-default]# dist 文件夹包含应用程序的生产文件，然后可以将其内容安全地移动到域 public_html 以便可以通过访问域主 public_html 链接查看应用程序。
Webpack 的自定义预设
在本节中，我们将为一个名为 lwvuejs-custom 的新项目创建一个自定义预设。 要创建第二个项目，我们需要回到域的 Document Root。
[[email protected] lwvuejs-default]# cd /home/$USER/public_html -or- [email protected] lwvuejs-default]# cd ..之后，使用命令创建一个新项目：
[[email protected]]# vue create lwvuejs-custom 在下一个屏幕上，通过单击键盘上的向下箭头键并按 Enter 按钮。
Vue CLI v3.0.5 ? Please pick a preset: default (babel, eslint) ❯ Manually select features 在我们选择手动选择功能选项并按 Enter 后，我们可以通过使用键盘上的空格键选择其他选项来选择它们。 例子：
Vue CLI v3.0.5 ? Please pick a preset: Manually select features ? Check the features needed for your project: ◯ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ❯◯ E2E Testing （选择的选项是路由器、Vuex、CSS 预处理器和 Linter）
选择这些选项后，按 Enter. 现在，我们需要回答一些关于上面选择的选项的问题。
Vue CLI v3.0.5 ? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y 我们回答’是‘ 这里。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS Less Stylus 我们将在这里选择第一个选项，因此我们将选择“Sass/SCSS”。
? Pick a linter / formatter config: (Use arrow keys) ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier我们还将选择第一个选项。
‘仅具有错误预防功能的 ESLint’
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ◉ Lint on save ◯ Lint and fix on commit 此外，我们通过按选择第一个选项 Enter.
‘保存时棉绒’
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files In package.json 在此步骤中选择专用配置文件将为每个选项创建一个单独的配置文件。 这可以进一步帮助重新配置，使其更容易。
? Save this as a preset for future projects? (y/N)如果我们在这个问题上选择是，我们将被要求为我们的预设提供一个名称，我们可以在以后的项目中使用它。 我们将对此选项回答“是”并将其命名为“lwvuejs-custom”。
提供名称并按“Enter,’ 创建项目需要一些时间。
就是这样！ 我们已经为 Vue JS 创建了我们的第一个自定义预设。
下面，你可以看到 babel 和 eslint 中的默认选项和我们刚刚创建的自定义预设的区别：
| 默认选项 | 自定义预设 |
| babel.config.js | .browserslistrc |
| 区 | .eslintrc.js |
| .git | .git |
| .gitignore | .gitignore |
| 节点模块 | 节点模块 |
| 包.json | 包.json |
| 包-lock.json | 包-lock.json |
| 上市 | postcss.config.js |
| 自述文件.md | 上市 |
| 源文件 | 自述文件.md |
| 源文件 |
标记的文件 蓝色 表格右侧是特定选项配置文件，可用于进一步配置这些选项。
即时原型
即时原型是最好的功能之一，它可以简化单个组件的测试，而无需设置和配置一个全新的项目来测试组件。 此外，它仅适用于您使用本地开发环境的情况。
但要做到这一点，我们需要在您计算机的任何位置安装“cli-service-global”模块。 我们将以 root 用户身份安装此模块。
我们首先使用 ‘su’ 命令切换到 root 用户：
（假设您最初以用户身份登录服务器）
[[email protected]]# su root 安装 cli-service 的命令是：
[[email protected]]# npm install -g @vue/[email protected]（由于我们使用的是 CLI 3 版本，我们将使用 3.0.5 版本）
该命令的输出应与此类似：
[[email protected] ~]# npm install -g @vue/[email protected] > [email protected] install /usr/lib/node_modules/@vue/cli-service-global/node_modules/yorkie > node bin/install.js setting up Git hooks trying to install from sub 'node_module' directory, skipping Git hooks installation > [email protected] postinstall /usr/lib/node_modules/@vue/cli-service-global/node_modules/core-js > node postinstall || echo "ignore" Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -) > [email protected] postinstall /usr/lib/node_modules/@vue/cli-service-global/node_modules/ejs > node ./postinstall.js Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@vue/cli-service-global/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) + @vue/[email protected] added 1198 packages from 930 contributors in 41.868s [[email protected] ~]# 现在我们可以使用以下命令在 public_html 目录中创建一个名为“test.vue”的测试组件：
[[email protected] public_html]# touch testcomponent.vue然后，我们可以使用以下命令对其进行测试：
[[email protected] public_html]# vue serve testcomponent.vue 上面的命令将启动一个开发服务器，并为您提供类似于以下代码的输出。
DONE Compiled successfully in 1176ms 12:09:03 PM App running at: - Local: https://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build. 通过单击链接 (https://localhost:8080/)，如果有任何内容，它应该只向我们显示这个特定组件。 在这种情况下，由于我们没有为组件提供任何内容，它将显示为空白页面。
此选项是在不干扰原始组件的情况下测试特定组件相关更改的新改进方法。
关于使用 Vue.JS 创建简单项目的文章到此结束。
想加入精英专家组？ 看看你是否有它需要的东西！
Liquid Web 拥有一些业内最强大的服务器！ 我们的基础设施是从头开始构建的，旨在提高速度、稳定性、安全性和冗余性。 这是知道我们带来什么的专家选择的主要原因之一 液体网.
