node创建一个vue项目

allen璟 allen璟     2022-12-24     476

关键词:

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”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回车到此等待安装完毕,会提示接下来的命令行

 

3,安装依赖

进入项目

cd new-project

安装

npm install

4,启动项目

npm run dev

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

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

npm run build

怎样创建一个vue项目(超简单)(代码片段)

...装@vue/cli模块包2、执行命令3、检查是否安装成功三、创建vue项目1、创建项目 2、选择模板和包管理器,等待项目创建完毕四、启动vue项目1、执行命令2、浏览项目页面五、vue项目目录文件含义和作用六、修改端口号七、... 查看详情

vue创建一个vue前端项目,编译,发布(代码片段)

....0ViewCode【二】安装vue-clicnpminstall--globalvue-cliViewCode【三】创建一个vue项目。基于#创建一个基于webpack模板的新项目$vueinitwebpackmy-project#这里需要进行一些配置,默认回车即可ViewCode 查看详情

vue安装&创建一个项目(代码片段)

1,安装node.jsvue依赖nodejs,所以首先要安装node.js然后打开cmd,输入命令,node-v。正常出现版本号,说明你已经安装成功了下载地址:http://nodejs.cn/download/2,npm(cnpm)npm是node的包管理工具使用node之后你会接触各种各样成千上万的... 查看详情

windows10安装node.js,vue.js以及创建第一个vue.js项目(代码片段)

【工具官网】Node.js: http://nodejs.cn/淘宝NPM: https://npm.taobao.org/一、安装环境1、本机系统:Windows10Pro(64位)2、Node.js:v6.9.2LTS(64位)二、安装Node.js步骤1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/2、选安装目录... 查看详情

nodejs14.3.1版本可以创建vue2项目吗

您好,答复您的问题,是的,Node.js14.3.1版本可以创建Vue2项目。Node.js是一种开源的、跨平台的JavaScript运行环境,它可以在多种操作系统上运行,包括Windows、Linux、macOS等。Node.js14.3.1版本支持Vue2项目的创建,它提供了一系列的API... 查看详情

vue项目的创建

工具介绍node.js 基于ChromeV8引擎的JavaScript运行环境npm  包管理器,是全球最大的开源库生态系统vue一套构建用户界面的渐进式框架 vue-cli vue脚手架,帮助你快速开始一个vue项目1.首先安装node.js和npm下载地址http://... 查看详情

vue-cli创建自己的项目

...e-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、安装node.js首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。只是这样安装的node是固定版... 查看详情

快速创建一个vue项目(代码片段)

...p;使用npminstall-gvue-cli 命令进行安装安装好这一步,在创建一个项目vueinit webpackmy-project,这一步要一系列的y或者n进行对项目的一些简单配置进入项 查看详情

vue-cli初始化创建vue2.9.6项目(代码片段)

阅读目录vue-cli安装vue-cli初始化创建项目1、vueinit命令讲解2、初始化创建项目package.json项目结构1、build目录(webpack配置)2、config目录(vue项目配置目录)3、node_modules(项目依赖包)src项目核心文件讲解项... 查看详情

vue-cli初始----安装运行vue项目(代码片段)

...装VueCli0、安装配置好node.js环境1、安装vuecli2、通过vuecli创建项目3、创建一个vue项目4、项目创建成功5、运行前端项目安装Node.js环境1、官网下载去node.js官网下载版本到本地,我下载到E:\\node.js\\,下载完之后会有这么多文... 查看详情

vue-cli初始----安装运行vue项目(代码片段)

...装VueCli0、安装配置好node.js环境1、安装vuecli2、通过vuecli创建项目3、创建一个vue项目4、项目创建成功5、运行前端项目安装Node.js环境1、官网下载去node.js官网下载版本到本地,我下载到E:\\node.js\\,下载完之后会有这么多文... 查看详情

安装vue及创建一个vue项目

创建一个Vue项目首先要先安装node及npm详情见【http://www.cnblogs.com/ylboke/p/8342116.html】及【http://www.cnblogs.com/ylboke/p/8342185.html】安装Git(Git是一个分布式版本控制系统)详情见(关于git使用在之后会记录)【http://www.cnblogs.com/wj-1314/p/7... 查看详情

第一个vue-cli创建项目(代码片段)

需要环境:Node.js:http://nodejs.cn/download/安装完成之后,使用cmd测试:  我现在的是最新的安装Node.js加速器:这个下载的稍微慢一些npminstallcnpm-g下载完之后在设置npmconfigsetregistryhttp://registry.npm.taobao.org安装的位置是C:UsersAdmi... 查看详情

vscode创建第一个vue项目

使用vue-cli快速构建项目 (vue-cli是vue.js的脚手架,用于自动生成vue.js模板工程的。安装vue-cli之前,需要先安装了vue和webpack)·node-v//(版本低引起:bash:npm:commandnotfound)·npm-v//以上帮助检查是否安装nodenpm·输入vue,//测试vue是否安... 查看详情

vue项目创建(代码片段)

vue项目创建(macos)1.node.js下载中文网下载地址速度快打开终端分别执行命令行node-v/npm-v如果出现版本号说明node.js环境已经配置完成2.安装webpack打包工具npminstallwebpack-g上面命令执行过程中有可能出现权限错误Error:EACCES:permissionden... 查看详情

vue项目创建(代码片段)

##一.环境搭建####1.安装node-去[官网](https://nodejs.org/zh-cn/)下载node安装包-傻瓜式安装-万一安装后终端没有node环境,要进行node环境变量的配置(C:ProgramFilesodejs)-可以通过node提供的npm包管理器安装vue脚手架-通过npm安装淘宝镜像cnpm,将nmp... 查看详情

创建vue项目遇到报错

由于电脑以前装过Vue-cli,再次创建项目的时候报错了(首先说下报错原因,是vue和vue-template-compiler版本不一致造成的)如下所示:$vuecreatetest1D:\nodejs\node_global\node_modules\@vue\cli\node_modules\vue-template-compiler\index.js:10thrownewE 查看详情

vue框架_vue环境搭建及创建项目

1、node.js:概念介绍及安装node.js:是一个基于chrome浏览器的v8引擎,可以运行javascript的环境(平台) 特性:异步IO模型 npm:是一个包管理器(工具),可以按装依赖插件应用场景:聊天、电子商务 优点:高并发且实时的情况下... 查看详情