(1). 安装可以反复生成脚手架的工具:
a. 设置淘宝镜像——下载快
npm config set registry https://registry.npm.taobao.org
b. 安装可生成脚手架代码的命令行工具
npm i -g @vue/cli
当看到: + @vue/cli@版本号 说明安装成功
(2). 用工具反复为每个项目创建专门的脚手架结构:
a. 决定把项目文件夹保存在哪个位置
b. 再在整个文件夹位置，运行: vue create 自定义项目名
1). ? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features
2). ? Check the features needed for your project:
( ) Choose Vue version //按空格切换选中/不选中
(*) Babel //ES6翻译为ES5
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router //VueRouter，SPA应用的核心
(*) Vuex
(*) CSS Pre-processors //支持Scss
( ) Linter / Formatter //不要选，代码质量检查工具，要求过于严格
( ) Unit Testing
>( ) E2E Testing
3). ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N
其实vue的路由有两种模式:
i. hash(#)模式: http://域名:端口号/#/相对路径
ii. history模式: http://域名:端口号/相对路径
需要专业的服务器端工程师配合——必须配置服务器端的首页重定向机制。
4). ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
5). ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
> In package.json
6). ? Save this as a preset for future projects? (y/N) N
7). 等待。。。
看到: Successfully created project xzvue. 说明安装成功
5. 使用vscode打开并运行脚手架项目:
(1). 右键单击package.json文件，选择"在集成终端中打开"
(2). 在终端窗口中输入: npm run serve
看到: App running at:
- Local: http://localhost:8080/
(3). 按住Ctrl，点local:右侧的连接，自动打开浏览器
标签：npm,Use,vue,步骤,Vue,创建,脚手架,CSS From： https://www.cnblogs.com/L-hailong/p/16950160.html