vue-cli脚手架

前提:node + npm 安装好

一、介绍

vue-cli: Vue + ESLint + webpack + iview + ES6

Vue:主要框架ESLint:帮助我们检查js编程时语法错误。原因:一个项目在多人开发,能达到一致的语法

webpack:设置代理、插件和loader处理各种文件和相关功能、打包等功能。整个项目的核心配置

iview:基于vue的一套样式,里面有很多封装好的组件样式

ES6:紧跟时代潮流,使用ES6语法,利用babel处理

二、安装vue-cli,创建项目并调用

1.打开cmd ,敲入命令:

npm install --global vue-cli (–global:全局安装)

2.cmd打开自己的工作空间,敲入命令:

vue init webpack test (其中test为项目名称,后面可以修改)

执行,出现以下代码:

说明:

“Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车

“Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试,所以这里选择的是”N”,而不是直接回车哦

“Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N”

这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader

三、目录结构说明
  1. bulid文件夹:

    对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件,分别是基本webpack配置、开发环境配置、生产环境配置。

  2. config文件夹:

    最主要的就是index.js 这个文件进行配置代理服务器,这个地方和我们息息相关,和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性,然后在里面加上对应的后台地址即可,例如:

    3.src文件夹:

    这个文件夹是整个项目最主要以及使用频率最高的文件夹。

    “assets”: 共用的样式、图片

    “components”: 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件

    “router”: 设置路由

    "main.js":对应App.vue创建vue实例,也是入口文件,对应webpack.base.config.js里面的入口配置

    4.static文件夹:

    存放文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用

    5.package.json:

    这个文件有两部分是有用的:scripts 里面设置命令,例如设置了dev用于调试则我们开发时输入的是 npm run dev ;例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包

四、下载依赖包

npm install | npm install vue -save-dev(依赖包)

这个过程会生成node_mordules文件夹。

五、npm run dev 启动项目

vue-cli安装搭建初始项目的更多相关文章

  1. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  2. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  3. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  4. vue的安装配置与项目创建

    1,安装vue必须先安装node.js.  --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...

  5. 手动搭建Vue之前奏:搭建webpack项目

    手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...

  6. Vue ---- 项目与环境搭建 初始项目结构 Vue生命周期

    目录 1. vue环境搭建 2. Vue项目搭建 pycharm配置并启动vue项目 3 . 认识项目 1. vue项目目录结构 2. 配置文件:vue.config.js 3. main.js 4. ...

  7. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  8. Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)

    vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...

  9. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

随机推荐

  1. SQL Server中 SET 和 SELECT 赋值有什么区别?

    SQL Server 中对已经定义的变量赋值的方式用两种,分别是 SET 和 SELECT.对于这两种方式的区别,SQL Server 联机丛书中已经有详细的说明,但很多时候我们并没有注意,其实这两种 ...

  2. 多玩YY语音的面试题:C++中如何在main()函数之前执行操作?

    多玩YY语音的面试题:C++中如何在main()函数之前执行操作? 第一反应main()函数是所有函数执行的开始.但是问题是main()函数执行之前如何执行呢? 联想到MFC里面的 C**App类的t ...

  3. 30+简约和平铺的WordPress复古主题

    现在复古风格的设计非常流行,你可以快速建立属于自己的复古风格的网站.继续阅读下去,我们将展示给你一些精彩的WordPress复古主题. 多年来,网页设计师们纷纷用3D效果,纹理,噪声,渐变的灯光效果, ...

  4. 可以用变量指定大小的Bits对象实现

    c++的容器中有位对象bitset,但是个人认为最大的问题是定义是必须指定常数大小,比如 bitset<3> bit; 无法实现 int n = 3; bitset<n> bi ...

  5. 在无界面centos7上部署jdk和tomcat

    1.安装xshell6 2.创建服务器连接,输入用户名和密码 3.输入 sudo su -root 获取root权限 4.输入 cd /usr/local 进入local文件夹 5.输入 wget - ...

  6. ES 20 - 查询Elasticsearch中的数据 (基于DSL查询, 包括查询校验match + bool + term)

    目录 1 什么是DSL 2 DSL校验 - 定位不合法的查询语句 3 match query的使用 3.1 简单功能示例 3.1.1 查询所有文档 3.1.2 查询满足一定条件的文档 3.1.3 分页 ...

  7. 用composer安装php代码(以安装phpmailer为例)

    1.安装composer.exe软件 2.下载composer.phar 3.创建composer.json文件 { "require": { "php": & ...

  8. 推荐一个高效,易用功能强大的可视化API管理平台

    项目管理 提供基本的项目分组,项目管理,接口管理功能 接口管理 友好的接口文档,基于websocket的多人协作接口编辑功能和类postman测试工具,让多人协作成倍提升开发效率 MockServer ...

  9. angular2最详细的开发环境搭建过程

    本文所需要的源代码,从 http://files.cnblogs.com/files/lingzhihua/angular2-quickstart.rar 下载 angular官方推荐使用quicks ...

  10. 【docker学习二】CentOS7.5+Docker 镜像(容器)的使用

    承接上篇:https://mp.csdn.net/postedit/82744127 上文介绍了容器与镜像的基本操作,这里总结下容器的使用. 先在官网找到一个镜像: https://hub.docke ...