zoukankan      html  css  js  c++  java
  • vue 构建项目vue-cli

      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就可以了。

            vue 构建项目遇到的问题

            vue 构建项目 文件引入

            vue 构建项目遇到的请求本地json问题

  • 相关阅读:
    [转]Spring的IOC原理[通俗解释一下]
    自我介绍
    什么是存储过程
    Linux 之 最常用的20条命令
    [转]sql语句中出现笛卡尔乘积 SQL查询入门篇
    mysql 多表连接
    正则表达式
    postman 测试API
    [转]mysql 视图
    数据库 修改统一显示时间
  • 原文地址:https://www.cnblogs.com/nelsonlei/p/10661333.html
Copyright © 2011-2022 走看看