zoukankan      html  css  js  c++  java
  • vue脚手架的快速搭建方式以及内部目录结构 webpack

    vue脚手架的快速搭建方式以及内部目录结构

     

    a    ,搭建Vue脚手架的方式   首先 检查电脑是否已经安装好了node   且node版本不能低于6.0.0 

        查询node  使用命令行   node -v    (如果版本过底 可去官网下载安装即可)

        

    b ,   检查完了node后就可以开始着手安装了   

      1 , 首先   先要安装好webpack 

           命令行        npm install webpack -g

      2 , 在webpack安装好的基础上   我们开始安装vue-cli脚手架

          命令行        npm install vue-cli -g

          检查是否安装成功  

           命令行  vue  -V

          

             3, 在本地任意位置处新建项目文件夹    按住shift键 单机鼠标 右键  进入命令行窗口

             4 , 创建一个Vue的工程  

          vue  init webpack-simple  工程名字 / vue init webpack 工程名字

          之后点击enter键    里面的全是项目描述  可写可不写

       5  , 之后安装依赖

                         cd vue-test (vue-test  ==工程名称)

             npm install

           npm run dev    (启动Vue工程命令行)

        启动之后    经等待几秒钟  进入页面 

      

    Vue搭建环境说完了   

    下面列出了Vue项目目录的结构和名称

    配置信息
    |-- 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 // 源码目录
    | |-- components // vue公共组件
    | |-- store // vuex的状态管理
    | |-- App.vue // 页面入口文件
    | |-- main.js // 程序入口文件,加载各种公共组件
    |-- static // 静态文件,比如一些图片,json数据等
    | |-- data // 群聊分析得到的数据用于数据可视化
    |-- .babelrc // ES6语法编译配置
    |-- .editorconfig // 定义代码格式
    |-- .gitignore // git上传需要忽略的文件格式
    |-- README.md // 项目说明
    |-- favicon.ico
    |-- index.html // 入口页面
    |-- package.json // 项目基本信息

  • 相关阅读:
    8.图形软件开发
    7.GDI绘图技术
    15.MFC网络通信
    JavaWeb:基于MVC设计模式的一个小案例(一)
    在虚拟机里连接PLC S7-200
    mark-又重新回到博客园
    早起的奇迹
    STM32-cJSON库的打包和解析
    Copley-STM32串口+CANopen实现双电机力矩同步
    DataStructure-链表实现指数非递减一元多项式的求和
  • 原文地址:https://www.cnblogs.com/liuhaov/p/13488113.html
Copyright © 2011-2022 走看看