VsCode新建VueJs项目的详细步骤


Posted in Javascript onSeptember 23, 2017

本文介绍了VsCode新建VueJs,分享给大家,具体如下:

使用vue-cli快速构建项目

( vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。 安装vue-cli之前,需要先安装了vue和webpack )

· node -v //(版本低引起:bash: npm: command not found)
· npm -v 
//以上帮助检查是否安装 node npm
· 输入vue,//测试vue是否安装成功
· 输入vue list  //看vue中有哪些子类 npm install vue
npm install -g vue-cli            
//全局安装vue-cli
 vue init webpack projectName    
//生成项目名为projectName的模板,这里的项目名projectName随你自己写 (是的话 敲回车就行)
//默认情况下,webpack安装的是最新版本的,如果要安装其他版本,使用命令行vue init webpack#1.0 ***就可以了。

在安装时会询问你:

①、Project name (sanfeng1);项目名称(sanfeng1)。(确定按enter,否按N)

②、 Project description (A Vue.js project);项目描述(一vue.js项目)。(随意输入一段简短介绍,用英文)

③、Author (sunsanfeng);作者(sunsanfeng)。(确定按enter,否按N)

④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render

functions are required elsewhere;Vue公司的建立(使用箭头键)>运行时+编译器:大多数用户推荐运行时间:约6kb轻民+ gzip,但模板(或任何Vue具体HTML)只允许在。VUE文件渲染功能是必需的其他地方。(按enter)

⑤、Install vue-router? (Y/n);安装的路由?(/ N)。(可安可不安,以后也可以再安,根据需求选择)

⑥、Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/ N)。(使用ESLint语法,就要做好心理准备,除非你非常懂ESLint语法,要不就会处处报错,我就被逼疯过,建议N)

⑦、Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(选N)

⑧、Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(选N)

cd projectName
// ctrl+c 结束并进入文件目录               
npm install                   
//初始化安装依赖
npm run dev     
//最后执行
//在浏览器打开http://localhost:8080,则可以看到欢迎页了。

但是这个只能在本地跑,要如何在我们自己的服务器上访问呢?

此时需要执行:

· npm run build
//会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。

注意:淘宝镜像语句,安装后npm速度更快,用的时候只需将npm都改成cnpm:

$ npm install -g cnpm ?registry=https://registry.npm.taobao.org

//or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题 
$ npm install ?registry=https://registry.npm.taobao.org

但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。

进入config/index.js

原来的配置的引用路径为

VsCode新建VueJs项目的详细步骤

我自己更改为

VsCode新建VueJs项目的详细步骤

这样就能正常访问了。

VsCode新建VueJs项目的详细步骤

tips:

1、安装npm的几种方法:

$ npm i 或
$ cnpm i 或
$ npm i cnpm -g (cnpm更快) 或
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
//[镜像文件](http://riny.net/2014/cnpm/),提升速度

2、如何更新npm至最新版本?

npm install -g npm

//但是,我尝试之后 查看npm当前版本
//npm -v
//显示的仍然是当前版本。
//npm 还有个命令是 update, 于是看了下官方文档:
//npm update [-g] [<pkg>...]
//于是尝试使用该命令:
//npm update -g npm
//之后仍然是无效。

最后去 npm 的官网

发现使用如下命令:

npm install npm@latest -g //可以更新npm至最新版本

其中 @ 符号后面可以添加你想更新到的版本号。

3、运行vue项目:

$ npm run dev 或 vsCode 查看 集成终端 输入以上命令

VsCode新建VueJs项目的详细步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制表单不能输入空格的小例子
Nov 20 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 #Javascript
JavaScript定义函数的三种实现方法
Sep 23 #Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 #Javascript
详细介绍RxJS在Angular中的应用
Sep 23 #Javascript
Javascript刷新页面的实例
Sep 23 #Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 #Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
You might like
PHP简介
2006/10/09 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
php实现上传图片文件代码
2015/07/19 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
微信小程序开发探究
2016/12/27 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
微信小程序页面上下滚动效果
2020/11/18 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python读大数据txt
2016/03/28 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
房地产工程部经理岗位职责
2015/04/09 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL