第一次使用VSCode创建vue项目（报错大全）

bu_xiang_tutou

已于 2022-11-01 19:55:12 修改

阅读量3.8k

点赞数 7

文章标签： vue.js vscode javascript

于 2022-11-01 19:54:21 首次发布

本文链接：https://blog.csdn.net/bu_xiang_tutou/article/details/127639900

版权

在VSCode中创建一个vue项目

第一步下载node

Node.js

第二步在VSCode中下载npm

npm install -g cnpm --registry=https://registry.npm.taobao.org
//下载完成后查看版本
-cnpm -v

报错

(2条消息) 【已解决】cnpm : 无法加载文件 C:UsersAppDataRoaming pmcnpm.ps1，因为在此系统上禁止运行脚本_华仔仔coding的博客-CSDN博客

使用npm安装TypeScript

cnpm i -g typescript
//查看版本
tsc -v

执行js文件

node 文件名.js

这里说一下，js的基本语法

/**
 * ts转换成js----> tsc 文件名
 * ts是js的一个超集
 * 扩展了功能
 * 1.类型限定
 *  声明变量的时候定义其类型
 * 2.基本类型
 *  2.1 number
 *  2.2 string
 *  2.3 boolean
 *  2.4 any
 *  2.5 数组
 */
var userName:string = "小红"
var age:number = 10
age++
var isVip:boolean = true
var dec:any = "成年了"
dec = false
var list:number[] = [ 1 , 2 , 3 , 4 , 5 ]//不定数量
var list2:[ number , string , boolean ] = [ 1 , "sdsd" , true] 

/**
 * 复杂数据类型 - 对象
 * 通过接口定义对象属性的类型
 */
interface UPerson{
    uanme: string ,
    uage: number ,
    uclass?: number ,//? 代表可有可无的属性
    sayHi:()=> string
}
var personObj:UPerson={
    uanme: "tyy" ,
    uage: 20 ,
    sayHi:():string => { 
        console.log("你好")
        return "hi"}
}
console.log(personObj.sayHi())

第三步创建一个vue项目

vue create app//创建一个叫app的vue项目

报错

(2条消息) vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次必解决技巧_H@Z*rTE|i的博客-CSDN博客_无法将“vue”项识别为

使用npm安装vue的脚手架

npm install vue-cli -g//安装vue的脚手架
要是版本要更新的话，就更新，更新后重新下载脚手架
//更新语句 
npm install -g cnpm --registry=https://registry.npm.taobao.org

接下来是创建vue项目的选择项

1.执行创建vue项目语句，选择第三项

2.空格选择插件，选择完成后回车

3.这里是需不需要这个组件，可选择要或者不要，这里是选的要

4.自动补充

5.补充历史

6.都是选择选择第一个

7.一定要选择No，意思是你下次项目是不是还是你上面的选择，一定要选择No!!!

8.回车之后进行安装，安装报错

修改

创建 vue 项目报错：command failed: npm install --loglevel error --legacy-peer-deps_淡然若水.的博客-CSDN博客

第四步成功创建vue项目

创建完成后，目录变成这样

1.后续操作，下载依赖

cnpm i

2.运行serve

npm run serve

3.运行报错

这个报错是格式错误，下面是我修改格式后成功运行的package.json文件，你们可以根据下面的代码修改自己的文件

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5"
  }
}