zoukankan      html  css  js  c++  java
  • vue 项目结构搭建 脚手架的搭建 Vue-cil

    vue-cil :vue脚手架:提供基本项目结构

    本身集成了很多项目模板:

        webpack:

        webpack-simple:

    mac 安装 前提示安装好node

    1.输入 sudo npm install -g vue-cli 这个命令;

    2.输入 vue

    3.输入 vue init webpack-simple vue_demo

    4进入cd vue_demo

    5 安装 npm install

    6运行 sudo npm run dev


     

     搭建

    1﹜ 安装Vue-cli 在终端执行npm install –g vue-cli 如果mac系统安装失败请使用 sudo  install –g vue-cli 

    2﹜ 使用vue-cli 新建项目,打开终端找一个你打算存放项目的目录,随便一个目录都可以,在终端执行 vue init webpack vuecli ,PS:vuecli 是项目名称,实际开发中修改成你想用的项目名称即可;

    Project name :项目名称,同项目初始化时的名称,如果不做修改直接enter;

    Project description:项目描述,这个基本可以不用修改直接enter即可;

    Author:作者,enter即可;

    Runtime + Compiler: recommended for most users:enter即可;

    Ininstall vue-router:是否安装vue-router,如果需要路由功能直接enter,如果不需要直接N 然后enter;

    Use ESLint to lint your code?:是否使用ESLint,是一个检查javascript语法错误的工具,这个前期可以直接N掉;

    Setup unit tests with Karma + Mocha?:这个前期也可以直接N掉;

    Setup e2e tests with Nightwatch?:Nightwatch是一个测试工具,N掉即可,前期用不到;

    然后根据提示执行,

    cd vuecli:进入项目目录;

    npm install :安装项目依赖,这可能会慢些,因为有些是境外资源,有经验的同学可以更换一下安装源,百度即可;

    npm run dev : 运行程序,此时你默认的浏览器会打开一个新的页面,表示你安装成功并成功使用vue-cli初始化了一个项目;

    |-- build                            // 项目构建(webpack)相关代码
    |   |-- build.js                     // 生产环境构建代码
    |   |-- check-version.js             // 检查node、npm等版本
    |   |-- dev-client.js                // 热重载相关
    |   |-- dev-server.js                // 构建本地服务器
    |   |-- utils.js                     // 构建工具相关
    |   |-- webpack.base.conf.js         // webpack基础配置
    |   |-- webpack.dev.conf.js          // webpack开发环境配置
    |   |-- webpack.prod.conf.js         // webpack生产环境配置
    |-- config                           // 项目开发环境配置
    |   |-- dev.env.js                   // 开发环境变量
    |   |-- index.js                     // 项目一些配置变量
    |   |-- prod.env.js                  // 生产环境变量
    |   |-- test.env.js                  // 测试环境变量
    |-- src                              // 源码目录
    |   |-- assets                       // 资源目录 
    |   |-- components                   // vue公共组件
    |   |-- store                        // vuex的状态管理
    |   |-- App.vue                      // 页面入口文件
    |   |-- main.js                      // 程序入口文件,加载各种公共组件
    |-- static                           // 静态文件,比如一些图片,json数据等
    |   |-- data                         // 群聊分析得到的数据用于数据可视化
    |-- .babelrc                         // ES6语法编译配置
    |-- .editorconfig                    // 定义代码格式
    |-- .gitignore                       // git上传需要忽略的文件格式
    |   |-- .postcssrc.js                // 通过JS插件装换样式的工具 
    |-- README.md                        // 项目说明
    |-- favicon.ico 
    |-- index.html                       // 入口页面
    |-- package.json                     // 项目基本信息
  • 相关阅读:
    [对对子队]会议记录4.10(Scrum Meeting 1)
    [对对子队]团队任务拆解Alpha
    [对对子队]功能规格说明书
    [对对子队]技术规格说明书
    团队项目选择
    团队作业第四次—项目系统设计与数据库设计
    团队作业第三次—项目需求分析
    团队作业第二次——团队Github实战训练
    团队作业第一次—团队展示和项目展示
    贡献分分配规则
  • 原文地址:https://www.cnblogs.com/xzma/p/7053565.html
Copyright © 2011-2022 走看看