先确保安装了node.js,VsCode，再进行以下操作。

1、新建终端执行

npm install -g vue-cli

npm install -g webpack

如果报错，

删除 C:\Users\89452  目录下的.npmrc文件

再清理下缓存

npm cache clean --force

 

2、安装完毕，新建一个文件夹用来防止vue项目，然后用终端打开

使用Vue创建第一个项目 helloworld_项目文件

 

 

 执行  vue init webpack myvue  初始化项目，myvue是项目名字，可以改。

 

可能会报错：vue : 无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。

解决办法：

（1）以管理员身份运行VSCode

（2）执行命令：get-ExecutionPolicy（取得shell的当前执行策略）

显示Restricted（表示状态是禁止的）

（3）执行命令：set-ExecutionPolicy RemoteSigned

（4）执行命令：get-ExecutionPolicy，显示RemoteSigned
使用Vue创建第一个项目 helloworld_初始化_02

再继续执行   vue init webpack myvue

使用Vue创建第一个项目 helloworld_项目文件_03

使用Vue创建第一个项目 helloworld_初始化_04

 

这时执行上面显示的

cd myvue

npm run dev 

再执行      http://localhost:8080

就能看见Vue界面了。 

（ 上面cd后面一定是myvue，这不是你的项目名称，而是npm自动创建的项目文件夹。）

 

3、打开项目文件夹，目录解释：

使用Vue创建第一个项目 helloworld_缓存_05

使用Vue创建第一个项目 helloworld_无法加载_06

 

4、修改 App.vue内容为

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Hello Vue and VsCode！'
    }
  }
}
</script>

重新打开

   http://localhost:8080

显示:

使用Vue创建第一个项目 helloworld_项目文件_07