vue项目创建步骤

(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:右侧的连接，自动打开浏览器