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 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
微信小程序背景音乐开发详解
Dec 12 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python笔记之工厂模式
2019/11/20 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
学习党章思想汇报
2014/01/07 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
食品销售计划书
2014/04/26 职场文书
小学班级口号大全
2015/12/25 职场文书