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 // 项目基本信息

原文地址:https://www.cnblogs.com/qinght/p/9042926.html

时间: 2024-10-08 14:05:55

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

利用Columnal网格系统快速搭建网站的基本布局结构

1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); (3)Less Framework(http://lessframework.com); (4)1140 CSS Grid(http://cssgrid.net); (5)Columnal(http://www.columnal.com) 2.本节主要讲Columnal网格系统并介绍如何利用它快速搭

利用vue-cli搭建项目后的目录结构

npm install -g vue-cli vue init webpack my-project(项目名称)  后的目录结构: -----build         webpack配置相关 -----config webpack配置相关 -----node-modules   npm install 安装的依赖代码库 -----src             存放项目源码 -----static

Linux开发环境搭建与使用——Linux 目录结构及文件

在 windows 平台下,打开"计算机",我们看到的是一个个的盘符: 在 Linux 下,我们是看不到这些盘符,我们看到的是文件夹(目录): 在早期的 UNIX 系统中,各个厂家各自定义了自己的 UNIX 系统文件目录,比较混乱.Linux 面世不久后,对文件目录进行了标准化,于1994年对根文件目录做了统一的规范,推出 FHS ( Filesystem Hierarchy Standard ) 的 Linux 文件系统层次结构标准.FHS 标准规定了 Linux 根目录各文件夹的名

vue cli4.0 快速搭建项目详解

搭建项目之前,请确认好你自己已经安装过node, npm, vue cli.没安装的可以参考下面的链接安装. 如何安装node? 安装好node默认已经安装好npm了,所以不用单独安装了. 如何安装vue cli? 剧场环境已搭建好,开始表演! 1.进入一个目录,创建项目 对应命令: vue create project-one 2.我们这里选择手动配置 按 ↓ 选择“Manually select features”,再按 Enter 3.选择你需要的配置项 通过↑ ↓ 箭头选择你要配置的项,

揭秘chromium内部目录结构

上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠自己.官网只能作为一个参考. Chromium结构相对两年前变化很大.目录结构依然很清晰,主要有三个部分(不包括其他的库):浏览器,渲染器,webkit.浏览器是主要的进程,代表所有的UI和I / O.渲染通常是每个tab页的子过程,是由浏览器驱动.Webkit做布局和渲染. 简单介绍解决方案文件:

利用vue-cli3快速搭建vue项目详细过程

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

利用yeoman快速搭建React+webpack+es6脚手架

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom

rapid-framework脚手架快速搭建springMVC框架项目

rapid-framework介绍:   一个类似ruby on rails的java web快速开发脚手架,本着不重复发明轮子的原则,框架只是将零散的struts(struts2)+spring+hibernate各个组件组装好在一起,并对struts及struts2进行改造,提供零配置编程,并内置一个强大的代码生成器及模板文件,可以生成java的hibernat model,dao,manager,struts+struts2 action类,可以生成jsp的增删改查及列表页面.  整个项目

vue-cli 快速搭建脚手架

使用 Vue.js 开发大型应用时,我们需要考虑代码目录结构.项目构建和部署.热加载.代码单元测试等事情.如果每个项目都要手动完成这些工作,那无疑效率是低下的,所以通常我们会使用一些脚手架工具来帮助完成这些事情.在 Vue.js 生态中我们可以使用 vue-cli 脚手架工具来快速构建项目. 1.安装 vue-cli 是用 node 编写的命令行工具,我们需要进行全局安装.打开命令行工具,输入指令: $ npm install -g vue-cli 注意:请确保 node 版本为 4.x.5.x