美文网首页
创建vue脚手架vue.cli

创建vue脚手架vue.cli

作者: 逃之夭夭li | 来源:发表于2018-03-21 22:29 被阅读0次

介绍下用 Vue2.0 搭建Vue脚手架(vue-cli),在搭建脚手架之前,先做好环境配置。

详细如下:

1.先下载node.js(官网地址:https://nodejs.org/en/)下载安装后,打开命令行工具(win+r,然后输入cmd),输入 node -v,查看版本号,出现类似下图的版本号说明安装成功:

node安装

2.输入npm -v 查看 npm 的版本号

npm版本号

3.有的朋友下载的时候比较慢,也可以通过安装淘宝镜像,打开命令行工具,把这个命令(npm install -g cnpm --registry=https://registry.npm.taobao.org)复制到命令行工具,记住要手动的右键粘贴,因为ctr + v 的在命令行没法粘贴。(自我感觉不用淘宝镜像也蛮快的)

4.现在有很多的项目模版(项目模版)

simple

webpack

webpack-simple

browserify

browserify-simple 等等

今天主要说下webpack 跟 webpack-simple

基本使用流程

(1) npm install vue-cli -g 安装vue命令环境 如下图(下载中):

安装vue命令环境

那么安装完成之后,如何查看是否安装成功了呢?输入 vue --version(注意:前面是两个杠) 如果出现版本号说明安装成功,如下图:

安装好出现版本号

(2)生成项目模版

命令: vue init <项目模版名> 本地自己想要创建的文件名字 如下图

生成自己创建的项目文档

这个时候出现?Project name 就是项目名称的意思,直接enter,然后还会跳出来另外的提示,一路enter下去,出现下图,说明项目模版创建完毕,这时候还没有完。

项目名称不能大写

注意: 此处自己创建的项目名字不能含有大些字母,不然报错提示

大写报错

(3)用cd <自己创建的项目名字> 进入到刚刚生成的项目目录里面

项目名字写入

注意:这个地方看你在那个文件夹里面,如果你是在刚刚创建的文件夹同一层打开的命令工具,那么直接cd <自己创建的项目名字>是可以进入的,这里简单说下

CD 目录名 进入到目录名文件夹

CD \ 退回到根目录

CD .. 退回到上一根目录

CD 或者 CD . 显示当前路径

(4)进入到刚刚生成的项目目录里面 运行命令 npm install 生成node_modules文件

安装node_modules

(5)这个时候 运行 npm run dev

启动跑起来

然后浏览器自动打开localhost:8080显示如下图页面,这个时候说明脚手架搭建成功了。有没有看明白的朋友,欢迎留言,共同进步。

完成over

相关文章

  • 创建vue脚手架vue.cli

    介绍下用 Vue2.0 搭建Vue脚手架(vue-cli),在搭建脚手架之前,先做好环境配置。 详细如下: 1.先...

  • vue.js

    vue.cli(脚手架)安装 1,检查NODE版本,确保在4以上稳定版本2,npm install -g vue-...

  • Vue脚手架: vue-cli@3.0.5

    Vue脚手架vue-cli3.0.5 脚手架安装 脚手架vue-cli3.0.5的使用 2.创建vue项目 开发环...

  • 使用vue-cli搭建vue项目

    vue-cli vue的脚手架 安装脚手架之前需要安装node.js 安装脚手架 安装vue-cli 创建vue项...

  • VUE----使用脚手架创建vue项目

    学习了vue的基础之后尝试使用脚手架创建一个vue项目 1.全局安装vue脚手架: 安装完成之后,vue脚手架文件...

  • vuecli3创建项目两种方式

    1. 安装与创建 安装vue脚手架 npm install -g @vue/cli创建项目a.手动创建vue cr...

  • 使用HBuilder将Vue项目打包为移动端APP

    1. 创建Vue项目并测试可正常运行 创建:可使用vue脚手架工具vue-cli创建vue项目,并安装依赖 测试:...

  • 使用HBuilderX将Vue项目打包为移动端APP

    1. 创建Vue项目并测试可正常运行 创建:可使用vue脚手架工具vue-cli创建vue项目,并安装依赖 测试:...

  • 环境搭建

    安装脚手架 npm i -g @vue/cli 创建项目 vue create xxx

  • vue脚手架

    安装6.1.0版本(创建vue脚手架的方法) 安装8.11.2版本(创建脚手架方法)

网友评论

      本文标题:创建vue脚手架vue.cli

      本文链接:https://www.haomeiwen.com/subject/iygnqftx.html