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

Posted qinght

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 // 项目基本信息

 





























以上是关于vue脚手架的快速搭建方式以及内部目录结构的主要内容,如果未能解决你的问题,请参考以下文章

Vue3搭建环境,创建运行项目,目录结构

vue-cli 快速搭建脚手架

vue脚手架搭建

搭建vue-cli脚手架

创建vue项目结构

Vue开发环境的搭建