1、首先得有node和npm的环境，node的下载：http://nodejs.org/download/。安装node之后，npm也自动生成了，显示版本号就意味着安装成功
2、接下来就是安装vue-cli脚手架，执行以下命令：
$ npm install -g vue-cli 安装脚手架 $ vue init webpack demo 利用webpack生成一个模板，项目名是demo $ cd demo 进入到demo项目 $ npm install 安装依赖 $ npm run dev 运行项目
在浏览器执行 http://localhost:8080，出现以下截图意味着成功。
3、脚手架目录说明
. ├── build/ # webpack配置文件 │ └── ... ├── config/ │ ├── index.js # 主要项目配置 │ └── ... ├── src/ │ ├── main.js # 应用入口文件 │ ├── App.vue # 主应用程序组件 │ ├── components/ # ui组件 │ │ └── ... │ └── assets/ # 模块资源（由webpack处理） │ └── ... ├── static/ # 纯静态资源（直接复制） ├── test/ │ └── unit/ # 单元测试 │ │ ├── specs/ # 测试spec文件 │ │ ├── index.js # 测试构建条目文件 │ │ └── karma.conf.js # 测试跑步者配置文件 │ └── e2e/ # e2e测试 │ │ ├── specs/ # 测试spec文件 │ │ ├── custom-assertions/ # e2e测试的自定义断言 │ │ ├── runner.js # 测试跑步脚本 │ │ └── nightwatch.conf.js # 测试跑步者配置文件 ├── .babelrc # babel 配置 ├── .postcssrc.js # postcss 配置 ├── .eslintrc.js # eslint 配置 ├── .editorconfig # editor 配置 ├── index.html # index.html模板 └── package.json # 构建脚本和依赖关系
注意：css、js、img等静态资源放在static下面，命名为css、js、img等，不然打包后会找不到路径
如需安装自己想要的文件，如：elementUI
在根目录找到 package.json，在"devDependencies"下加入 "element-ui": "^2.4.11"，然后在命令窗口执行npm install就可以了。
原文地址：https://www.cnblogs.com/nelsonlei/p/10661333.html
时间： 2024-11-10 15:46:13