前端项目 0->1 开发
前端项目 0->1 开发
1 概述
一步步完成一个完整的前端项目。
2 vue3 脚手架初始化
VSCode 和 Node.js 已安装好，具体安装此处不描述。
使用命令行安装好 vuecli 工具，命令如下。
# 如果有老版本的 vuecli，先执行下面命令卸载老版本的 vuecli。
$ npm uninstall -g vue-cli
# 全局安装 vuecli(3 以上版本)
$ npm install -g @vue/cli
# 验证
C:\Users\SHJ>node -v
v14.20.1
C:\Users\SHJ>npm -v
6.14.17
C:\Users\SHJ>vue -V
@vue/cli 5.0.8
新建 psysui 应用。
使用 $ vue create psysui，psysui 是项目名。
点击回车后出现下面的选项：
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
选择第 4个，即自定义创建。
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
( ) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
继续，其它略，最终结果如下。
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
启动
$ cd first
$ yarn serve