当前位置: 首页 > Web前端 > HTML

vue单页应用的创建与运行

时间:2023-04-02 18:31:17 HTML

首先要开始vue单页应用的开发。您必须知道如何运行它以及如何创建单个页面。下面就带大家一步步入vue的坑。..1、安装node安装node不是让你去学习node,而是需要node里面所有的npm来安装。进入node官网下载页面http://nodejs.cn/download/...安装完成后,在命令框中输入npm-v,查看是否安装成功。如果显示npm的版本号,则安装成功。2.导入淘宝镜像这里引入淘宝镜像主要是为了让速度更快。毕竟有时候出国访问比较慢,在命令框中输入npminstall-gcnpm--registry=https://registry.npm.taobao.org导入后查看版本号看是否安装成功,cnpm-v,如果有很多ofthingscomingout,表示成功3.在命令框中安装vue脚手架cnpminstallvue-cli-g(这里必须全局安装),安装完成后可以进入vue的开发,查看脚手架是否安装成功vue-V(这里的V要大写)4.安装webpack在你要的盘中创建一个项目文件,然后在项目文件所在目录打开命令框,输入cnpminstallwebpack(这里webpack是在本地安装的,如果要全局安装,命令为cnpminstallwebpack-g)5.以上四步vue项目创建完成后,在项目文件所在目录下,打开命令框,输入vueinitwebpack[vueprojectname]第五步之后,你会在项目文件中看到,vuePro就是我们创建的vue项目开发文件,然后在这个文件中开发vue单页应用。6.运行vue项目。在上面创建的vuePro文件目录下,打开命令提示框,输入cnpminstall。运行完成后,继续在命令框中输入cnpmRundev接下来,就可以运行项目了。注意,如果eslint验证过于严格,需要关闭,那么在build.gradle中删除webpack.base.conf.js文件这部分内容。删除的部分如下图所示:test:/\.(js|vue)$/,loader:'eslint-loader',enforce:'pre',include:[resolve('src'),resolve('test')],options:{formatter:require('eslint-friendly-formatter')}},