Vue-cli开发SPA应用(试用初学者)

使用Vue开发SPA(单页面应用)估计各位博友都耳熟能详了,这里简单概要一下使用vue-cli快速开发单页面应用。本博文以window系统为例(虽然用的是Mac操作的,考虑到大多数博友是用window开发),Mac系统类似,不多赘述。

环境要求node 6.0以上(不要安装7.0,这是beta版)

下载链接https://nodejs.org/en/

安装教程https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html

1.检测电脑是否安装了node,打开终端输入node -v 这里我使用的是6.10.3

2.安装淘宝镜像(尽管这一步没什么必要,但是安装以后对之后的开发会有很大的帮助)

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

接下来就可以使用cnpm 代替npm执行命令了,速度会很快(需要了解cnpm的可以百度了解)

3.找一块空的文件夹(以后的项目可以放在这个文件夹下),按住shift键右击选择在此处打开终端,命令行继续cnpm i vue-cli -g(安装Vue脚手架,切记一定要全局安装)

4.检测一下vue-cli是否安装了,使用vue -V(这里是大写的V),我这里是vue是2.8.1版本的

 

5.命令行继续 cnpm i webpack -g(安装webpack)

6.命令行vue init webpack 项目名(这里写你的项目名字,例如vueproject)

 这里会让你输入项目名,描述,作者之类的,一般单页面应用都需要路由,在选vue-router选yes,但是需要注意的是Eslint检查代码建议选no,这个是严格模式,建议不要使用!!!之后的选项都选no

7.按照提示 cd 项目名 进入你的项目所在文件夹

8.cnpm i (虽然这里提示的是npm install,这里使用cnpm 更加快捷一点,i 是install的简写),这时候你会发现文件内多了node_modules文件夹,里面都是一些开发依赖

9.cnpm run dev 这时候项目就运行了

这里你可以修改一些东西,看下效果,这里不需要刷新,因为webpack已经配置了热模块加载,无需刷新就能实现修改内容的替换。

router就是路由文件,App.vue是vue根文件,main.js是入口文件,这里只是简单的介绍一下Vue脚手架的搭建,之后会讲解Vue项目开发的内容。

另外细心的博友会注意到在我浏览器的右上角会有一个Vue的图标,这是我安装了devtools(vue开发工具,下节讲解)

时间: 2024-10-13 21:04:18

Vue-cli开发SPA应用(试用初学者)的相关文章

使用vue cli开发项目中遇到的坑

一.部署文件 使用vue cli 开发项目,执行npm run build命令生成dist静态文件,将dist文件包放到服务器中即可. 刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在 inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文        文件即可,上传静态文件dist,将 controller指向index.html. 二.跨域问题 实行前后端分离,使用vue i

Vue CLI 3开发中试用UIkit 3组件库

一.UIkit组件库与vuikit简介 在选择好意中的前端开发基本框架后,接下来一个重要任务就是选择一款好的UI组件库.其中,UIkit组件库是一款基于Less+JS的一款轻量级.模块化.响应式的前端UI组件库.特别是,从版本3.0.0 beta 31开始完全脱离了jQuery框架.UIkit组件库的一个重要特点是,其提供的组件大部分是非常基础性的,但是也有一部分组件相当实用,例如Slideshow组件.Upload组件.Video组件等,在github网站上的评价星数是13K,相当不错.另一个

Vue CLI 3开发中屏蔽烦人的EsLint错误

问题 Vue开发中,特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误.有关EsLint这个工具的作用不再赘述.查阅网上参考文档,大多是针对早起版本Vue CLI工具项目的,在我最新使用的Vue CLI 3生成的工程中根本不起作用.无奈之下,认真学习了Vue CLI 3官方文档,终于找到最佳答案. 办法 Vue这个前端框架相对于React和Angular,入门会非常快.但是,到了中后期实战阶段仍然有许多工程实际问题需要我们一块一块地攻克.Vue CLI这

更新到@vue/cli 4.1.1版本的前端开发前的准备

一.概念简述 1.node.js目的是提供一个JS的运行环境. 2.npm(node package manager)是一个JS包管理器. 二.检查自己的电脑是否已安装相关配置 1.查看node.js 2.查看npm或cnpm 这里我是用了淘宝的cnpm镜像 3.查看vue版本 可以查看vue内置命令 有ui这个命令方可使用vue ui进入UI界面的项目初始化. 三.通过配置达到上述的配置结果 首先,去node.js官网下载最新版的node.js,下载好根据提示安装完毕即可. 其次,npm是随着

vscode下搭建vue.js开发环境(基于最新的@Vue/cli 4.2.2)

2020-02-13. 网上的那些怎么安装vue环境的2.x就不要再看了,都过时了,现在去官网下载,按照他们的设置各种问题.接下来看下最新的安装方法. 前四步是一样的: 1.下载并安装vscode 2.下载并安装node.js(一直next即可) 安装完成之后在终端输入:node -v和npm -v查看是否安装成功.npm是node.js的包管理工具. 3.这里我们可以更改node.js默认下载依赖的位置 在自己安装的node.js文件夹中新建一个node_cache文件夹,新建一个node_g

windows下vue.js开发环境搭建教程

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件.但最近发现在不同的项目重写组件是件非

vue.cli脚手架初次使用图文教程

vue.cli脚手架初次使用图文教程 我之前的环境是安装了node.js, 我记得曾经好像安装过vue ,不过现在又要重新开始学习起来了.在youtube上看了一vue的相关教程,还是需要实操的. 好像安装过npm -v 发现已经安装了5.6.0 需要安装然后使用 cnpm 安装 vue-cli 和 webpack 安装代码:npm install -g vue-cli 一.生成项目 首先需要在命令行中进入到项目目录,然后输入: vue init webpack vue-testone p.p1

使用@vue/cli初始化项目

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它.附上vue-cli官方文档地址 首先检查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),命令为 node --version 1.安装vue-cli,-g表示全局安装,这样你才可以直接在命令行使用该指令,否则不行 npm insta