记录一下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. Oracle常用指令

    /**  为了清晰化的显示:所有固定命令都是用大写格式显示 SQL语法分类:DML,DDL,DCL (1)DML(Data Manipulation Language ,数据库操作语言): 数据:增加 ...

  2. linux下jar命令(运行jar包)

    直接用java -jar xxx.jar,当退出或关闭shell时,程序就会停止掉.   普通方式启动应用: java -jar jarPackageName.jar 1>system.log ...

  3. 使用Duilib开发Windows软件(2)——控件的基本介绍

    XML 先学习xml https://www.w3cschool.cn/xml/xml-xml-tutorialhc4o1t5m.html 控件 上图是我们下载的NIM_Duilib_Framewor ...

  4. 【数据结构】洛谷2019 OI春令营 - 普及组 作业

    [P3662][USACO17FEB]Why Did the Cow Cross the Road II S 求解连续的k个数的最大值,利用前缀和维护即可. #include<bits/stdc ...

  5. SSM集成

    SSM集成   Spring和各个框架的整合   Spring目前是JavaWeb开发中最终的框架,提供一站式服务,可以其他各个框架整合集成   Spring整合方案   SSH Ssh是早期的一种整 ...

  6. Java锁的升级策略 偏向锁 轻量级锁 重量级锁

    这三种锁是指锁的状态,并且是专门针对Synchronized关键字.JDK 1.6 为了减少"重量级锁"的性能消耗,引入了"偏向锁"和"轻量级锁&qu ...

  7. JDBC 学习复习8 C3P0数据源使用

    C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展.目前使用它的开源项目有Hibernate,Spring等. c3p0与dbcp区别 dbcp ...

  8. 在sublime3中运行python文件

    1.首先下载Sublime和Python,安装Python环境 注意:如果不想动手亲自配置Python环境安装的时候环境变量,请在安装的界面给Add Python 3.5 To Path前面打上对号. ...

  9. [Lua性能] 小试验一例

    local s1 = os.clock() local list1 = {} , do list1[#list1 + ] = end local e1 = os.clock() print(" ...

  10. MySql Host is blocked because of many connection errors 问题的解决方法

    错误日志: message from server: "Host '10.250.112.141' is blocked because of many connection errors; ...