1. 安装vue

  npm install vue -g

  2.  安装vue-cli脚手架

  npm install vue-cli -g

  3. 安装webpack

  npm install webpack -g

  4 cd[/d][X:]进某个路径,存放我们要建的项目,否则会默认路径建项目

  vue init webpack "项目名称"

  5 等项目初始化完以后cd进所在的目录

  cd '项目所在文件夹'

  6 npm run dev运行项目


文件构成详解

第一部分: build构建脚本目录

build.js ===》 生产环境构建脚本

check-versions.js ===》 检查npm node.js脚本

utils.js ===》 构建相关工具方法

vue-loader.conf.js ===》配置了css加载器以及编译之后css自动添加前缀

webpack.base.conf.js ===》webpack基本配置

webpack.dev.conf.js ===》 webpack开发环境配置

webpack.prod.conf.js ===》 webpack生产环境配置

第二部分: config 项目配置

dev.env.js ===》 开发环境变量

index.js ===》项目配置文件 (可在此处配置targetPath等)

prod.js ===》 生产环境变量

第三部分 node_modules: npm加载的项目依赖模块

第四部分 src  这里是开发目录,里面包含了很多目录及文件

assets ===》资源目录,放置一些图片或者公共js 公共css,这里的资源会被webpack构建

components ===》组件目录,项目的组件就在这个目录下

router ===》 前端路由,路由路径就写在这里面

App.vue ===》 根组件,一切的源头

main.js ===》 入口js文件

static:静态资源目录

index.html:首页文件入口,可添加一些meta信息

packge.json:npm包配置文件,定义了项目的npm脚本以及依赖包插件等信息

README.md:项目的说明文档

【vue2.x基础】用npm起一个完整的项目的更多相关文章

  1. SuperSocket基础(二)-----一个完成SocketServer项目

    SuperSocket基础(二)-----一个完成SocketServer项目 由于时间关系未能及时更新,关于SuperSocket,对于初学者而言,一个SuperSock的Server真的不好写.官 ...

  2. 一个完整的项目中,需要的基本gulp

    一个完整的项目需要使用gulp的多种功能,包括—— (1)加载各种需要的插件 var concat=require('gulp'); var clean=require(''gulp); 等等.需要的 ...

  3. asp.netmvc 三层搭建一个完整的项目

    接下来用 asp.net mvc 三层搭建一个完整的项目: 架构图: 使用的数据库: 一张公司的员工信息表,测试数据 解决方案项目设计: 1.新建一个空白解决方案名称为Company 2.在该解决方案 ...

  4. 如何基于Spring Boot搭建一个完整的项目

    前言 使用Spring Boot做后台项目开发也快半年了,由于之前有过基于Spring开发的项目经验,相比之下觉得Spring Boot就是天堂,开箱即用来形容是绝不为过的.在没有接触Spring B ...

  5. 如何使用npm构建一个react demo项目

    方法一: 1) 安装node.js环境  点我进入nodejs官网 1.1) 下载LTS(Long term support)版本,安装 1.2) 在cmd中使用以下命令查看node是否安装成功 no ...

  6. Python+Selenium基础篇之5-第一个完整的自动化测试脚本

    前面文章,我们介绍了如何采用XPath表达式去定位网页元素,在掌握了如何抓取或者如何书写精确的XPath表达式后,我们可以开始写自己的第一个真正意义上的webui 自动化测试脚本,就相当于,你在学习P ...

  7. 【Android】 分享一个完整的项目,适合新手!

    写这个app之前是因为看了头条的一篇文章:http://www.managershare.com/post/155110,然后心想要不做一个这样的app,让手机计算就行了.也就没多想就去开始整了.   ...

  8. (续)使用Django搭建一个完整的项目(Centos7+Nginx)

    django-admin startproject web cd web 2.配置数据库(使用Mysql) vim web/settings.py #找到以下并按照实际情况修改 DATABASES = ...

  9. 一个完整的机器学习项目在Python中的演练(二)

    大家往往会选择一本数据科学相关书籍或者完成一门在线课程来学习和掌握机器学习.但是,实际情况往往是,学完之后反而并不清楚这些技术怎样才能被用在实际的项目流程中.就像你的脑海中已经有了一块块"拼 ...

随机推荐

  1. golang中,unsafe.sizeof到底是干嘛的?

    https://www.golangtc.com/t/5ad833404ce40d2654053485 小生初学Go,有一点不懂,今天为了知道空结构体到底占多大的空间的时候,去百度说用unsafe.s ...

  2. python 逻辑运算符and or

    Python中逻辑运算符与C.C++.Golang等语言不太一样. 简单记录下. 1. 都是真或第一个真,第二个假 >>> a = 1 >>> b = 2 > ...

  3. 汽车Lin总线特点

    串行通信:线间干扰小,节省线束,传输距离长 单线传输:增强的ISO 9141 (ISO 15765-1),总线电压基于VBAT 最高速率:20kbit/s 单主多从结构,无需仲裁:主节点同时包含主任务 ...

  4. html 绘图

    <html> <head> <title>canvas绘制图形</title> <style> body{ margin: 0px; pad ...

  5. 比较&关系运算符

    <1> 比较(即关系)运算符 python中的比较运算符如下表 运算符 描述 示例 == 检查两个操作数的值是否相等,如果是则条件变为真. 如a=3,b=3则(a == b) 为 true ...

  6. Word2007—如何快速取消自动编号

    有时候自动编号很麻烦,有没有好的办法可以快速取消呢. 1.禁止自动编号.在Word为其自动加上编号时,只要按下Ctrl+Z键撤销操作,此时自动编号会消失,而且每次键入数字时,该功能就会被禁止了. 2. ...

  7. sql server 2014安装后用sa登录问题

    在使用的sql server的数据的情况下,安装数据过程,未指定使用sa的登录,只能使用windows的账户登录,那要怎么设置账户来使用sa账户登录账号呢? 首先先打开的是sql server man ...

  8. C#使用NPOI读写excel

    本帖内容来自网络+自己稍作整理,已找不到原贴,侵删 个人比较习惯用NPOI操作excel,方便易理解.在宇宙第一IDE(笑)——VS2017中插入NPOI就很方便: 首先安装NPOI: 然后在.cs文 ...

  9. LeetCode.1009-十进制数的补码(Complement of Base 10 Integer)

    这是小川的第377次更新,第404篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第238题(顺位题号是1009).每个非负整数N都具有二进制表示.例如,5可以二进制表示为 ...

  10. 【HTTP】四、HTTP协议常见问题

      HTTP协议是一个非常重要的应用层协议,在面试中有很多关于这方面的问题,这里做一个总结,大部分都在前面的文章中提到了,没提到的这里做一个介绍. 1.HTTP协议的基本原理.工作流程   HTTP协 ...