node创建Vue项目步骤详解

vue的安装

Vue.js不支持IE8及以下版本。因为Vue.js使用了ECMAScript5特性，IE8显然不能模拟。

Vue.js支持所有兼容ECMAScript5的浏览器。

在用Vue.js构建大型应用时，推荐使用npm安装，npm能很好的和webpack等打包工具配合使用。

首先Vue的安装依赖于node.js，要保证你的计算机上已经安装过node.js。

如何查看node是否安装或者node版本呢？
进入cmd，输入命令 node -v，回车查看。node最好使用新一些的版本，否则后续安装会提示node版本过低

如果是安装过node,则会显示node的版本，否则就会提示不是内部或外部命令，这时候需要自行去node官网下载 
并安装

1，安装vue

npm install vue

安装完毕后，可以检验版本。

vue -V

到此vue安装成功

创建一个vue项目

1，全局安装 vue-cli

npm install --global vue-cli

2 , 创建一个基于webpack 模板的新项目

vue init webpack new-project

输入上面命令后，会询问几个选项，根据自己需要填写就可以了。

Project name :项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。

Project description:项目描述，直接回车

Author ：作者

vue build 构建方式（暂且这么解释）

两个选择（上下箭头选择，回车即为选定）

1.Runtime + Compiler:recommended for most users

(译：运行+编译：被推荐给大多数用户)

2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY

allowed in .vue files-render functions are required elsewhere

(译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择该构建方式对文件大小有要求)

这里推荐使用1选项，适合大多数用户的

install vue-router？是否安装vue的路由插件，需要就选y，否则就n（以下均遵循此方法）

Use ESLint to lint your code?是否使用ESLint检测你的代码？

（ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）

Pick an ESLint preset:选择分支风格

选项有三个

  1. standard(https://github.com/feross/standard) js的标准风格
  2. Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法
  3. none (configure it yourself) 自己配置

Setup unit tests? 是否安装单元测试（暂不详细介绍）

Pick a test runner 选择一个单元测试运行器

选项有三个

  1. Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架）
  2. Karma and Mocha
  3. none

Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。）

Should we run 'npm install' for you after the project has been created?(译：项目创建后是否要为你运行“npm install”?这里选择包管理工具)

选项有三个

  1. yes,use npm(使用npm)
  2. yes,use yarn(使用yarn)
  3. no,I will handle that myself(自己操作)

一路回车到此等待安装完毕，会提示接下来的命令行

3，安装依赖

进入项目

cd new-project

安装

npm install

4,启动项目

npm run dev

这时候在浏览器中打开cmd上显示的地址就可以看到新建的页面。

http://localhost:8081

但是这个只能在本地跑，要如何在我们自己的服务器上访问呢？ 此时需要执行： ·

npm run build

到此这篇关于node创建Vue项目步骤详解的文章就介绍到这了,更多相关node创建一个Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue项目从node8.x升级到12.x后的问题解决

    开始使用低于vue-cli3创建的项目,在更新node到12.x后,项目运行不起来了,这个让我想起我刚使用react时,安装的依赖,过了半年后,项目也运行不起来,在这了记录下(时间:2019-10-24) 1.版本更新后报错 更新node后,原来的vue项目的node Sass环境变了,导致项目跑不起来 Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 12.x

  • node vue项目开发之前后端分离实战记录

    前言 本文主要介绍了关于node vue前后端分离的相关资料,分享出来供大家参考学习,下面随着小编来一起学习学习吧. node vue项目开发 最近看了近一周的vue开发,有诸多感触,我之前接触过react.angular所以特别想学学久仰大名的vue.学习半天以后发现,接触到的东西多了,学习起来就是容易很多,vue的指令我能个联想到angular的指令,vue组件化设计类似于react的组件化设计,包括一些router的设置跟react里的路由或者nodejs里的路由都差不多,vuex更是根据

  • node创建Vue项目步骤详解

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟. Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续

  • 如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    如何用Idea或者webstorm跑一个Vue项目(步骤详解)

    现在vue.js几乎是程序员必会的前端框架啦~ 今天就学习记录一下怎么运行一个vue项目 无论是Idea还是webstorm,都是一样的操作. 去网上随便找一个开源项目,以下就是操作的流程,不管是用webstorm还是idea界面都一样. 第一步:终端输入npm install命令 第二步:配置这里 第三步:第二步点开以后就是这个界面 其中,name自己随便写 package.json的路径 scripts这里写dev还是serve,看json文件配置 第四步:这就是配置文件,里面是命令 第五步

  • 苹果M1芯片安装nginx 并且部署vue项目步骤详解

    苹果M1芯片安装nginx 并且部署vue项目步骤详解

    brew安装nginx 苹果mac安装使用 brew 安装,如果brew没有安装的话,请到搜索其他地方. 执行命令 第一步当然是更新我们的brew库,可以认为这个玩意就是个软件仓库,类似于安卓市场,苹果appStore brew update 第二步直接查找我们的brew库中有没有nginx这个玩意儿 brew search nginx 如果出现,证明库中已经有了,直接进行安装命令 brew install nginx 安装完 只要没有报错,你的nginx就是已经安装成功了... mac环境下的

  • eclipse创建python项目步骤详解

    eclipse安装Python插件之后,主要是为了方便Python代码就可以再Eclipse进行代码脚本,使用Eclipse开发Python脚本,主要写代码会有提示功能,提高写代码效率,运行代码方便进行调式,错误提示更直观. 打开Eclipse,选择菜单中[file]>>new>>other 选择Python选项,然后选择project mondel 输入project name项目名称,运行IDE根据搭建环境选择版本 这里可以直接点击next,下一步 然后直接点击[是],如果是[

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • sql server 2008 数据库管理系统使用SQL语句创建登录用户步骤详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: --服务器角色: --固定服务器角色具有一组固定的权限,并且适用于整个服务器范围. 它们专门用于管理 SQL Server,且不能更改分配给它们的权限. --可以在数据库中不存在用户帐户的情况下向固定服务器角色分配登录. --按照从最低级别的角色(bulkadmin)到最高级别的角色(sysadmin)的顺序进行描述: --1.Bulkadmin:这个服务器角色的成员可以运行BULKINSERT语句.这条语句允许从文本文件中将数据导入到SQL

  • iOS 10 和Xcode8 一起 创建 Siri 功能步骤详解（OC写的 ）

    iOS 10 出来之后,我们开发者也可以使用类似Siri的功能..让我们来看看怎么使用吧,其实他是使用Siri里面的一个语音识别框架Speech framework. 让我们来看看 一些 主要的代码吧. 我们需要一个 UITextView 和 UIButton 就 能体现了. 第一步:定义属性 @interface ViewController () <SFSpeechRecognizerDelegate> @property (strong, nonatomic) UIButton *sir

  • 图文讲解用vue-cli脚手架创建vue项目步骤

    用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构.今天小编我便来记录一下vue-cli脚手架的构建项目的经验. 1.首先便是要搭建好vue-cli脚手架工具才行滴.搭建vue-cli脚手架工具的方法便是如图所示这样滴. 2.然后指定一个目录并用vue init webpack+项目名称便可得到前端项目的结构了哦. 3.接着便是一路回车来确认项目所用到的一些语法和测试包即可. 4.接着便可看到依赖包已经配置成功了.可以用cd来进入项目里边并执行npm run dev即可启动刚才初

  • requirejs + vue 项目搭建详解

    以前都是支持 司徒正美 的,毕竟咱们也是跟着 司徒正美 一起走进了前端的世界.所以一般MVVM都是用avalon的,当然也是考虑到项目需要支持IE6,7,8的考虑.当然在用的时候也有一些小坑和bug,都处理了.今年正美正好升级avalon2.0,加入虚拟dom的时候,不稳定了,就考试寻找其他的mvvm框架. 看了比较流行的一些框架,最后选择了vue.选择他的原因是 文档比较全,而且还有中文的(你懂的),生态圈比较好,有vux, vue-loader, vue-router ,组件化设计的也很好.

  • vue脚手架项目创建步骤详解

    vue脚手架 -> vue.cli 快速的创建一个大型的功能齐全的vue项目模板(初始化项目) 土味解释:快速的创建一个空的vue项目 安装(全局安装) 全局安装 > npm i @vue/cli -g 创建vue脚手架项目 > vue create 项目名 配置选项 Vue CLI v4.5.11 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Pr

随机推荐