The old open-source version of my homepage was built from an HTML template, but the site is gradually being moved over to Vue. I started keeping notes during the process, and this is the first entry.
Before writing anything in Vue, you need to have Node.js and the related tooling installed. The official sites are the best place to get that set up:
- Node.js: https://nodejs.org
- Vue: https://cn.vuejs.org/
When installing the framework, I recommend using pnpm or cnpm instead of plain npm. It tends to reduce installation errors and saves some patience.
1 2 3
npm install -g pnpm
pnpm set registry https://registry.npmmirror.com/
pnpm create vue@latest
Once the project name is entered, it is worth keeping Vue Router enabled. My suggested setup looks like this:
✔ Project name: … ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./… Done.
After the scaffold is created, there are three basic commands to run:
1 2 3
cd <your-project-name>
pnpm install
pnpm run dev
pnpm run dev starts the local preview for the project. If you want a static build, just run pnpm run build, and the generated files will be placed in ./dist.
If you prefer to deploy through a pipeline such as GitHub Actions, create a workflow file under .github/workflows with any filename you like, and use the following YAML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
name: Build webpages for vue
on:
workflow_dispatch:
push:
branches: [main, master] # 当监测 main,master 的 push
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
# If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
with:
persist-credentials: false
- name: Install and Build
run: |
npm install
npm run build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACTION_TOKEN }}
BRANCH: gh-pages
FOLDER: dist
For ACTION_TOKEN, you need to generate a token in GitHub and add it as a secret. If you are not sure where to do that, open your repository and go to /settings/secrets/actions. For example:
https://github.com/nuoyis/webpages/settings/secrets/actions
Once the Vue project is running in preview mode, the basic framework is already in place. Most of the files you will actually edit are inside src. A practical approach is to move everything except main.js and app.vue out of the project at first, so that when you get stuck, you can still refer back to the official structure and style.
You can also edit the <head> section in the root index.html, but changing the <body> there is generally not recommended.
The next part of the process will go into the second entry.