vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。我们在开发项目时尤其需要这样一个快速构建项目的工具。

以下是使用vue脚手架,vue-cli搭建开发环境,进行项目的基础代码结构搭建,做一些项目初始化的工作。

一:准备环境和工具
                   1.安装node.js,安装完成后输入node -v进行查看 ,安装完成后是自带npm(包管理工具),但是npm从国外的服务器下载,安装依赖会很慢,所以用可以换成cnpm来安装依赖
                   2.安装淘宝镜像,打开命令行,npm install -g cnpm --registry= https://registry.npm.taobao.org ,输入cnpm -v查看
                   3.安装webpack,输入 npm install webpack -g ,输入webpack -v
                   4.安装vue-cli脚手架构建工具,输入npm install vue-cli -g,输入vue-V
              二:用vue-cli构建项目
                   1.指定相关目录
                   2.安装vue脚手架,vue init webpack 名称
                   3.cd 名称
                   4.安装项目依赖:npm install ,安装构建过程中已经存在package.json文件进行依赖的安装。首先是npm install,若时间过长,则换成cnpm install 进行安装
                   5.安装vue-router和网络请求模块vue-resource,输入cnpm install vue-router vue-resource --save
                   6.启动项目,输入npm run dev ,默认启动的端口号是8080

安装完成后可以看到文件结构如下:

搭建vue脚手架---vue-cli的更多相关文章

  1. Vue脚手架(CLI)第一天

    vue 1.脚手架的搭建(CLI) 1.1.下载nodejs,在官网, [nodejs官网地址][ https://nodejs.org/en/ ] 无脑下一步就可以了.环境自动安装 1.2.下载脚手 ...

  2. 运行vue项目--安装vue脚手架vue cli

    第一步. 安装node: 官网下载node的.pkg,下载地址,选择相应版本进行下载 mac终端下输入npm -v 和 node -v, 出现相应版本号即安装成功. 若均提示 command not ...

  3. 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用

    Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...

  4. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  5. [vue三部曲]第一部:vue脚手架的搭建和目录资源介绍,超详细!

    第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...

  6. vue脚手架搭建流程

    搭建vue项目之前你需要安装vue的脚手架和node.js,一起去看看怎么搭建一个vue环境吧.(学编程语言最爱看见的就是用这个先写一个helloworld,只想说我对世界友好可是现实是残酷的.... ...

  7. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  8. 使用vue脚手架(vue-cli)快速搭建项目

    一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...

  9. Vue脚手架搭建步骤

    Vue脚手架的搭建步骤 1.   去node.js官网下载node.js并安装,如下图: 2.   找到下载的文件并点击安装: 一直到finish完成.安装成功 3.   通过DOS密令打开: 输入: ...

随机推荐

  1. Data Preprocess

    本文试图解决一个问题,即我们自定义的数据如何训练模型?初识深度学习,我们接触手写数字识别模型,但是批次数据是mnist已经定义好的,我们现在有自己的图片如何做成批次进行训练模型. 现在我们将准备好的原 ...

  2. sqlmap+DWAV测试实战(一)

    root@kali-yaming:~# sqlmap -u "http://172.18.225.39/vulnerabilities/sqli/?id=1&Submit=Submi ...

  3. Nginx详解十八:Nginx深度学习篇之Rewrite规则

    Rewrite规则可以实现对url的重写,以及重定向 作用场景: 1.URL访问跳转,支持开发设计,如页面跳转,兼容性支持,展示效果等 2.SEO优化 3.维护:后台维护.流量转发等 4.安全 配置语 ...

  4. C++ GetUserName()

    关于函数“GetUserName()”,参见:https://msdn.microsoft.com/en-us/library/windows/desktop/ms724432(v=vs.85).as ...

  5. P0505

      算法训练 P0505   时间限制:1.0s   内存限制:256.0MB      一个整数n的阶乘可以写成n!,它表示从1到n这n个整数的乘积.阶乘的增长速度非常快,例如,13!就已经比较大了 ...

  6. 如何使用Scrapy框架实现网络爬虫

    现在用下面这个案例来演示如果爬取安居客上面深圳的租房信息,我们采取这样策略,首先爬取所有租房信息的链接地址,然后再根据爬取的地址获取我们所需要的页面信息.访问次数多了,会被重定向到输入验证码页面,这个 ...

  7. 利用redis统计信息对CPU使用率进行收集

    http://dy.163.com/v2/article/detail/DQT2ROO10511RVML.html

  8. 将Elasticsearch的快照备份到HDFS

    1.安装Elasticsearch插件repository-hdfs 下载地址:https://artifacts.elastic.co/downloads/elasticsearch-plugins ...

  9. WebApi接口返回值不困惑:返回值类型详解

    前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.作为程序猿,我们都知道参数和返回值是编程领域不可分割的两大块,此前分享了 ...

  10. Application Initialization UI for IIS 7.5

    IIS Application Initialization for IIS 7.5 enables website administrators to improve the responsiven ...