VsCode创建第一个vue项目

使用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)


1

2

3

4

5

6

7

cd projectName

// ctrl+c 结束并进入文件目录              

npm install

//初始化安装依赖

npm run dev    

//最后执行

//在浏览器打开http://localhost:8080,则可以看到欢迎页了。

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

此时需要执行:


1

2

· npm run build

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

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


1

2

3

4

$ 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

原来的配置的引用路径为

我自己更改为

这样就能正常访问了。

tips:

1、安装npm的几种方法:


1

2

3

4

5

$ 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至最新版本?


1

2

3

4

5

6

7

8

9

10

npm install -g npm

//但是,我尝试之后 查看npm当前版本

//npm -v

//显示的仍然是当前版本。

//npm 还有个命令是 update, 于是看了下官方文档:

//npm update [-g] [<pkg>...]

//于是尝试使用该命令:

//npm update -g npm

//之后仍然是无效。

最后去 npm 的官网

发现使用如下命令:


1

npm install [email protected] -g //可以更新npm至最新版本

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

3、运行vue项目:

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

原文地址:https://www.cnblogs.com/z45281625/p/9015380.html

时间: 2024-08-27 18:33:58

VsCode创建第一个vue项目的相关文章

创建一个Vue项目

Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript5特性. 在用Vue.js构建大型应用时推荐使用NPM安装,Npm能很好地和诸如Webpack或Browserify模块打包器配合使用.Vue.js也提供配套工具来开发单文件组件. vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可以进入cmd编辑器,输入node -v进行查看.node尽量要用一些新的版本,否则后续安装会提示node版本过低.去node官网下个新版node

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最好使用新一些的版本,否则后续安装

使用VSCode配置简单的vue项目

由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCode开发vue,所以自己摸索了好久,才算是把简单的项目配置成功了.后续还得自己多了解这方面的知识.想着怕时间长了自己会忘记,所以写下来也供有需要的人一起学习. 一.配置环境 1.1 下载VSCode,官网直接下载就行. 1.2 汉化VSCode Ctrl+Shift+P 输入 "configure d

一、vue:如何新建一个vue项目

比较好用的一个脚手架:https://a1029563229.gitbooks.io/vue/content/cooking-cli.html 创建一个vue项目的流程: 1.安装node,版本号必须是3.0.0以上 2.python 2.7.* 3.安装淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 4.cnpm i cooking-cli -g //npm install -g vue-cli 5. co

完整搭建一个vue项目

目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node -v npm -v 2.为了提高下载效率,可以使用淘宝镜像 # 淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org # 检查是否安装成功 cnpm -v 3.安装webpack打包工具 webpack中文文档 npm

如何搭建一个vue项目(完整步骤)

参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了. 检查是否安装成功: 二.搭建vue项目环境 1

创建第一个react项目

由于新项目的缘故,接触了一下React这个 Javascript 库.下面我就简单的总结一下经验以及遇到的一些问题,希望能够帮到需要的朋友. 一.安装 Node.js. 以下是我百度云盘的分享. https://pan.baidu.com/s/1ftU3mn2jN9bnOGevMdcrDg     提取码:wow3 二.安装cnpm cmd命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 三.安装yarn cmd命

[Android Studio 权威教程]离线配置SDK,创建第一个AS项目

前三篇bolg我给大家分享了怎么安装Android Studio,但是我们还没有使用AS创建一个Android 的项目,那么这篇blog我们开始离线配置SDK,并且创建一个Android项目 没有看如何安装Android Studio的童鞋,请先看这里,然后回来我们继续: [Android Studio 权威教程]Mac下安装Android Studio [Android Studio 权威教程]Linux下安装Android Studio [Android Studio 权威教程]Window

用Kotlin创建第一个Android项目(KAD 01)

原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:http://antonioleiva.com/create-first-android-project-kotlin/ 原文作者,开始Kotlin系列课程的第一课:用Kotlin创建第一个Android项目. 今天,我开始一组30篇针对Android开发者的Kotlin语言的论文(KAD).在这系列