Vue CLI构建SPA项目教你手把手创建SPA项目

下载安装Vue-CLI

官方文档：https://cli.vuejs.org/zh/

首先要确定自己的电脑上安装了 Node.js 8.9 或更高版本。

然后，我们就可以使用 npm 来安装 vue/cli ：

npm install -g @vue/cli

安装之后，我们可以在命令行中使用 vue 指令查看安装的版本：

创建一个项目

vue create 项目名称

【第一步】手动选择组件

【第二步】勾选需要安装的组件：

babel：将ES6的语法转成浏览器可以执行的低版本js语法

Router：（必须）路由

Vuex：可选

【第三步】选择Vue版本

【第四步】使用路由的 history 模式：

【第五步】把配置写到 package.json 文件中：

不保存本次的配置：

启动项目

安装成功之后，我们可以进行使用以下指令启动项目：

cd 项目名   // 进入项目目录
npm run serve   // 启动项目

总结

1 安装Vue-CLI的命令：npm install -g @vue/cli

2 创建SPA项目的命令：vue create 项目名字

3 运行SPA项目的命令：npm run serve

Vue CLI构建SPA项目教你手把手创建SPA项目相关推荐

一步一步做项目（3）创建Web项目
一步一步做项目(3)创建Web项目创建Web项目配置git 保存到Github上创建Web项目启动eclipse,执行File->New->Dynamic Web Project, ...
cordova + vue cli构建跨平台应用
一.开发环境搭建 node.js 二.cordova 主要用于将开发好的网页打包成APP,支持的平台有:Android.IOS.Blackberry 10.OS X.Ubuntu.Windows.WP ...
gradle构建多模块项目_Gradle入门：创建多项目构建
gradle构建多模块项目尽管我们可以仅使用一个模块来创建一个运行中的应用程序,但有时将我们的应用程序划分为多个较小的模块是比较明智的. 因为这是一个相当普遍的用例,所以每个自重的构建工具都必须 ...
react项目_如何从零开始创建React项目（三种方式）
在开发React项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,在这里介绍三种从零开始创建React项目的方式,分别是在浏览器中直接引入.使用官方脚手架create ...
用idea建立jsp项目_用idea创建maven项目，配置tomcat详解
用idea创建maven项目,配置tomcat详解,电脑上得有jdk1.7,或者1.8,然后就是maven3.x吧,再有就是tomcat7以上下面就直接开始看图啦: 这个我刚刚开始没注意细看,原来w ...
用vscode创建一个c项目_Visual Studio Code创建C#项目
visual studio code是一个支持跨平台的文本编辑器,同其他文本文本编辑器一样,不但占用磁盘空间下,性能也比较快:近几年由于不断的升级和许多开发者提供大量的插件,它已经成为了一个非常强大的 ...
新建Android项目，会出现两个项目一个是自己创建的项目，另一个是“appcompat_v7”项目，这是怎么回事呢？该怎么解决呢？...
做Android开发的朋友最近会发现,更新ADT至22.6.0版本之后,创建新的安装项目,会出现appcompat_v7的内容.并且是创建一个新的内容就会出现.这到底是怎么回事呢?原来appcompa ...
idea 创建java web项目_使用IDEA创建javaweb项目
IDEA是程序员们常用的java集成开发环境,也是被公认为最好用的java开发工具,关于IntelliJ IDEA设置的方法和IntelliJ IDEA使用技巧的相关知识们在前面的文章中也有学习过,那 ...
cli vue 外部js 引入文件_javascript - vue cli构建的项目中，vue组件里怎么引入外部js文件里的方法...
问题我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...

Vue CLI构建SPA项目教你手把手创建SPA项目

下载安装Vue-CLI

创建一个项目

启动项目

总结

Vue CLI构建SPA项目教你手把手创建SPA项目相关推荐

最新文章

热门文章