1、官网下载node.js最新稳定版本,若无意外(出现过官网更新node但是npm版本没跟上的情况),npm会随node.js版本同步更新到最新版本
查看版本指令

node -v
npm -v
查看得到版本就是安装成功了

2、全局安装vue-cli工具:

npm install vue-cli -g
npm install -g @vue/cli-init

建议使用windows powershell写指令,

在资源管理器的这里输入powershell,然后回车
输入
运行速率比cmd快得多,但是使用前,需要设定好指令执行权限,输入指令:

set-ExecutionPolicy RemoteSigned

3、环境变量设置,安装脚手架之后,需要把vue.cmd的根目录和文件目录放到path里面,如D:\nodejs\node_global\vue.cmd
D:\nodejs\node_global
通过指令

vue -V

确定vue版本和安装成功

4、创建一个项目文件夹,比如D:\workspace\,在文件下目录下打开powershell,输入指令:.

vue init webpack vue-demo

创建vue-demo项目,然后填写一些基本信息,不要使用额外插件

? Project name vue-demo
? Project description A test project
? Author tjq
? Vue build Runtime-only
? Install vue-router? Yes
? Use ESLint to lint your code? Yes(担心语法格式影响自己开发习惯的,此处选择No)
?Pick an ESlint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm(看个人习惯选择,比如其他yarn之类的)
最后回车等待初始化即可

安装后的目录使用说明

|- build(打包配置)
|- config(开发配置)
|- dist(打包生成的可部署文件)
|- node_modules(依赖包)
|- src
  |- assets (公共css文件, js文件, 图片等)
  |- components (组件)
  |- router (路由器)
  |- App.vue (全局底板组件,包含一个范例)
  |- main.js (入口js,初始化)
|- static (其他静态文件)
|- package.json (依赖包配置)
|-index.html(打包后的首页入口)
Logo

前往低代码交流专区

更多推荐