当前位置: 移动技术网 > IT编程>开发语言>JavaScript > vue 构建项目vue-cli

vue 构建项目vue-cli

2019年04月07日  | 移动技术网IT编程  | 我要评论
1、首先得有node和npm的环境,node的下载:http://nodejs.org/download/。安装node之后,npm也自动生成了,显示版本号就意味着安装成功 2、接下来就是安装vue-cli脚手架,执行以下命令: 在浏览器执行 http://localhost:8080,出现以下截图 ...

  1、首先得有node和npm的环境,node的下载:安装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://www.lhsxpumps.com/_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 配置
├──                   # 模板
└── package.json                # 构建脚本和依赖关系

 

   注意:css、js、img等静态资源放在static下面,命名为css、js、img等,不然打包后会找不到路径

 

   如需安装自己想要的文件,如:elementui

  在根目录找到 package.json,在"devdependencies"下加入 "element-ui": "^2.4.11",然后在命令窗口执行npm install就可以了。

 

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网