vue单页应用之创建和运行

首先要开始vue单页应用开发,肯定是要知道如何运行,如何创建单页,这里将一步步带你入vue的坑。。。

1.安装node

安装node并不是叫你学习node,而是我们需要node里面npm所有才去安装,进入node官网的下载页http://nodejs.cn/download/下载合适的安装包进行安装,安装完毕之后在命令框中输入npm -v看下是否有安装成功

这里写图片描述
如果有显示npm的版本号说明安装成功

2. 引入淘宝镜像

这里引入淘宝镜像主要是为了能够速度快些,毕竟要访问国外的有时候会比较慢,在命令框中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org引入之后查看版本号,看是否安装成功,cnpm -v,如果有一大串东西出来说明成功

3.安装vue脚手架

在命令框中cnpm install vue-cli -g(这里一定要全局安装),安装好之后就可以进入vue的开发了,检查脚手架是否安装成功vue -V(这里的V要大写)

这里写图片描述

4.安装webpack

在你想要的磁盘里面创建一个项目文件,然后在这个项目文件的目录下,打开命令框,输入
cnpm install webpack(这里webpack是局部安装如果要全局安装则命令为cnpm install webpack -g)

这里写图片描述

5.vue项目创建

以上四步都完成之后,在项目文件的目录下,打开命令框输入vue init webpack 【vue项目名称】

这里写图片描述

第五步之后,会在项目文件中看到

这里写图片描述

vuePro就是我们创建的vue项目开发文件,接下来都在这个文件里面进行开发vue单页应用

6.运行vue项目

在上面创建的vuePro文件目录下,打开命令提示框,输入cnpm install,运行完毕之后,继续在命令框中输入cnpm run dev接下来就可以运行项目了

这里写图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想将Vue单页应用转换为静态的HTML文件,可以使用打包工具将Vue项目打包成静态文件,再将打包后的静态文件上传到服务器上,即可通过浏览器访问生成的HTML页面Vue项目的打包工具有很多,比如Webpack、Rollup、Parcel等。其中,Webpack是最为常用的打包工具之一。下面以Webpack为例,简介绍如何将Vue单页应用打包成静态文件。 1. 安装Webpack和相关插件 ``` bash npm install webpack webpack-cli webpack-dev-server vue-loader vue-template-compiler html-webpack-plugin -D ``` 2. 创建Webpack配置文件 在项目的根目录下创建一个webpack.config.js文件,并添加以下内容: ``` js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.vue$/, use: 'vue-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] } ``` 其中,entry表示入口文件,output表示输出文件的路径和名称,module.rules表示加载器的规则,plugins表示插件。 3. 编写Vue单页应用 在src目录下编写Vue单页应用,可以使用Vue CLI进行快速创建。 4. 打包项目 运行以下命令进行打包: ``` bash npx webpack ``` 5. 生成HTML文件 在dist目录下会生成一个bundle.js文件和一个index.html文件,将这两个文件上传到服务器上,即可通过浏览器访问生成的HTML页面。 以上是将Vue单页应用转换为静态HTML文件的基本步骤,具体实现可能需要根据项目的具体情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值