记录一下vue项目的搭建流程。

1.安装node、npm

下载地址为:https://nodejs.org/en/

设置环境变量,命令行分别输入: node -v   npm -v  查看安装是否成功

设置淘宝镜像源,命令行输入:

npm install -g cnpm –registry=https://registry.npm.taobao.org

命令行输入:cnpm -v 查看设置是否成功

为什么前端vue开发需要node?

构建工具需要node,比如使用es6写需要babel转码,css需要sass,less,postcss进行预处理或后处理,开发服务器,代理等等。

先简单介绍一下:

npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

2.安装脚手架

全局安装vue-cli

npm install --global vue-cli

3.创建项目

vue init webpack project-name

安装命令行提示逐步操作即可。

说明:

vue build ==> 打包方式,回车即可;

install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到

use ESLint to lint your code ==> 是否需要 js 语法检测

set up unit tests ==> 是否安装 单元测试工具

setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具

4.初始化项目

进入项目目录,输入:

cnpm install (或npm install)

项目目录结构说明:

  1、build:构建脚本目录

    1)build.js   ==>  生产环境构建脚本;

    2)check-versions.js   ==>  检查npm,node.js版本;

    3)utils.js   ==>  构建相关工具方法;

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

    5)webpack.base.conf.js   ==>  webpack基本配置;

    6)webpack.dev.conf.js   ==>  webpack开发环境配置;

    7)webpack.prod.conf.js   ==>  webpack生产环境配置;

  2、config:项目配置

    1)dev.env.js   ==>  开发环境变量;

    2)index.js   ==>  项目配置文件;

    3)prod.env.js   ==>  生产环境变量;

  3、node_modules:npm 加载的项目依赖模块

  4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

    2)components:组件目录,我们写的组件就放在这个目录里面;

    3)router:前端路由,我们需要配置的路由路径写在index.js里面;

    4)App.vue:根组件;

    5)main.js:入口js文件;

  5、static:静态资源目录,如图片、字体等。不会被webpack构建

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

  7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息

  8、README.md:项目的说明文档,markdown 格式

  9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

Vue项目搭建流程的更多相关文章

  1. Vue项目搭建流程 以及 目录结构构建

    Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...

  2. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  3. Vue项目搭建与部署

    Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue  是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...

  4. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  5. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  6. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  7. vue项目搭建 (一)

    vue项目搭建 (一) 由于一直想要有自己的框架,因而一直在尝试搭建各类结构,结合vue官网及git上大神bailicangdu的项目,再看看网上一些意见,及个人思考,总结的一些,不到之处希望大家可以 ...

  8. vue项目搭建介绍02

    目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...

  9. vue项目搭建通过vue-cli包括组件路由的使用实现基本的前端项目全流程

    github上项目地址:https://github.com/comonly/javaweb_blog/tree/master/blog_diverse_frontend 具体搭建流程及实现方式:ht ...

随机推荐

  1. [转帖]CentOS 8 正式发布

    CentOS 8 正式发布   终于发布了.. https://news.cnblogs.com/n/640416/ 前几天刚弄完centos7.7 的环境. CentOS 8 官方正式发布了!!!C ...

  2. Python class and object

    # Python继承 class Person(object): """人""" def __init__(self, name, age) ...

  3. Centos7.3安装jdk和maven

    安装jdk和maven             通过winscp上传jdk             解压                 tar -zxvf jdk-8u91-linux-x64.ta ...

  4. Python笔记008函数(2)

    1.        昨日内容回顾: def 函数(): 函数体 return 值 如果不写return,默认返回None.可以单独返回一个值,也能够以元组的形式返回多个值.(不要把print和retu ...

  5. css 动画(一)transform 变形

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 有段时间我是没理清 transform.translate.transition 和 animation之 ...

  6. .htaccess 转 SAE AppConfig

    新浪的SAE不支持 htaccess,但是他们开发了 AppConfig,可以完全代替 htaccess 的常见功能,AppConfig采用类自然语言的规则描述,还是很人性化的. 这里来写一个短网址的 ...

  7. iis 虚拟目录 文件服务器

    需求 多节点站点部署时,上传文件地址统一 调整步骤如下 建立文件服务器 共享目录 设置账号密码 各服务器建账号 密码 需与文件服务器账号密码一致 调整 web.config 在<system.w ...

  8. centos禁止root用户ssh远程登录

    首先,我们要以root身份登录远程主机 vim指令编辑ssh配置文件,如 vim /etc/ssh/sshd_config 查找PermitRootLogin,把yes改为no 修改完配置需要重启ss ...

  9. VBA术语(三)

    在本章中,将介绍常用的Excel VBA术语.这些术语将在很多的模块中使用,因此理解其中的每一个术语都很重要. 模块 模块是编写代码的区域.如下图中,这是一个新的工作簿,因此没有任何模块. 要插入模块 ...

  10. Oracle学习笔记——Linux下开启Oracle

    1.开启数据库 sqlplus  /  as sysdba startup 2.启动监听:lsnrctl  start; 查看监听状态:lsnrctl status; 3.登入数据库 Linux 设置 ...