Vuejs 安装NPM环境、cli3脚手架以及VsCode配置

参考地址：

1.安装Node.js

  • https://nodejs.org/en/ 下载安装包，左侧的即可，默认安装
  • CMD输入 node -v 查看是否出现相应版本号。
  • npm包管理器是集成在node中，输入 npm -v，查看是否出现相应版本号

2.安装cnpm

用的是淘宝镜像，因为国外网站打不开

  • CMD输入 npm install -g cnpm --registry=http://registry.npm.taobao.org,后面可以使用cnpm 代替npm

3.创建cli3

我对比教程，我跳过了vue init webpack firstVue，这个我在创建的时候没有安装，建议先按照我的步骤走，如果出错，再进行尝试。如果是clone别人的项目，需要npm install安装一下modules环境

  • CMD 命令cd到项目文件夹（D: 直接进入D盘）
  • CMD 命令 vue create hello-word3 --创建项目名称
  • 选择 Manually select features 回车 --default(默认配置)和Manually select features(手动配置) 默认配置只有babel和eslint其他的都要自己另外再配置，所以我们选第二项手动配置。
    在每次选择手动配置之后，会询问你是否保存配置，也就是图片中的koro选项，这样以后我们在进行创建项目的时候只需使用原先的配置就可以了，而不用再进行配置。
  • 选择配置,我一般选择Router ,Vuex ,空格选中，回车结束。详细的可以看这位博主写的。https://www.jianshu.com/p/3f8bfe70433b
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
// 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
>( ) TypeScript                                 // 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support          // PWA 支持
 ( ) Router                                     // 支持 vue-router
 ( ) Vuex                                       // 支持 vuex
 ( ) CSS Pre-processors                         // 支持 CSS 预处理器。
 ( ) Linter / Formatter                         // 支持代码风格检查和格式化。
 ( ) Unit Testing                               // 支持单元测试。
 ( ) E2E Testing  //
  • 选择放入 In package.json 文件中
  • 选择yes 保存配置，并且命名
  • Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
  • 选保存之后，会让你写一个配置的名字：
  • Save preset as: name // 然后你下次进入配置可以直接使用你这次的配置了

4.启动图形化界面

  • CMD命令 vue -ui （这个属于了解，用到Vuex管理的适合，需要安装一个Chrome插件检测）

5.运行

  • cmd界面 npm run serve
  • Vscode ,终端敲如上命令（报错的话请注意，一定要CD到项目文件中启动）

6.VsCode设置

  • 在.Vscode文件中，launch.json将原本的内容替换为如下,就可以F5直接打开网页了
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    // "configurations": [
    //     {
    //         "type": "node",
    //         "request": "launch",
    //         "name": "启动程序",
    //         "skipFiles": [
    //             "<node_internals>/**"
    //         ],
    //         "program": "${workspaceFolder}\\TestProject\\hello-word\\src\\main.js"
    //     }
    // ]
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*"
          }
        },
        {
          "type": "firefox",
          "request": "launch",
          "name": "vuejs: firefox",
          "url": "http://localhost:8080",
          "webRoot": "${workspaceFolder}/src",
          "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
      ]
}
posted @ 2020-03-09 13:45  Alex_Mercer  阅读(773)  评论(0)  编辑  收藏  举报