VsCode新建VueJs项目的步骤

  • 时间:
  • 3531人关注

本篇文章主要介绍了VsCode新建VueJs项目的详细步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,另外这篇文章主要知识点是关于VsCode、VueJs、VsCode的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:VsCode
  • 编辑整理:暴华荣
  • 教程字数:2346字节
  • 阅读时间:大概8分钟
  • 下载本教程(DOC版)
  • 本文介绍了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项目的详细步骤

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


    上一篇:vue纯js监听滚动条到底部的知识点实例

    下一篇:axios用最优雅的方式写ajax请求实例方法

    相关内容

    • vscode能用java吗

      vscode是可以用于编写Java代码的,但是vscode默认是不支持Java语法的,我们可以通过vscode中的扩展商城来找到Java相关的扩展插件进行下载和安装,然后配置Java扩展插件来实现对Java语法的支持。 1、vscode(Visual Studio Code)是一款免费开源的现代化轻量级代码编辑器,内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C/C++、C#、Python、PHP、Java等其他语言。 2、vscode

      11-18vscode可以写java么

      阅读更多
    • Vue.js修饰符知识点详解

      本篇文章主要介绍了Vue.js学习笔记之修饰符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      08-02Vue.js修饰符用法

      阅读更多
    • 关于Vue.js中 v-model 指令的修饰符

      v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。这篇文章通过实例代码给大家介绍Vue.js中 v-model 指令的修饰,感兴趣的朋友跟随小编一起看看吧

      02-29Vue.js中 v-model 指令的修饰符详解

      阅读更多
    • VueJS组件之间通过props交互及验证的模式讲解

      本篇文章主要介绍了VueJS组件之间通过props交互及验证的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

      07-24VueJS组件之间通过props交互及验证的方式

      阅读更多
    • vuejs使用value in list循环遍历数组出现警告的解决方法

      今天小编就为大家分享一篇解决vuejs 使用value in list 循环遍历数组出现警告的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

      09-16解决vuejs 使用value in list 循环遍历数组出现警告的问题

      阅读更多
    • Vue.js快速入门

      Vue.js快速入门

      目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。

      大小:26581 MB MVue.js入门

      点击下载
    • Vue.js前端开发:快速入门与专业应用

      Vue.js前端开发:快速入门与专业应用

      本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

      大小:3.6KB MB前端开发

      点击下载
    • Vue.js项目实战

      Vue.js项目实战

      Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

      大小:141 MBVue

      点击下载
    • 前端工程师必备技能:Vue移动开发实战技巧

      前端工程师必备技能:Vue移动开发实战技巧

      Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

      大小:122 MBVue实战

      点击下载
    • Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

      Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

      本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

      大小:132979 MB 项目实战

      点击下载
    • Vue.js实战

      Vue.js实战

      尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

      大小:196.7 MBVue

      点击下载
    • 水晶石技法VUE 10完全学习手册

      水晶石技法VUE 10完全学习手册

      《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见

      大小:114191 MB VUE10学习手册

      点击下载
    • Vue.js快速入门

      Vue.js快速入门

      目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

      大小:186.6 MBWeb前端

      点击下载
    • JavaScript+Vue+React全程实例

      JavaScript+Vue+React全程实例

      这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

      大小:59150 MB MJS实例

      点击下载

    学习笔记

    16小时19分钟前回答

    详解用vscode开发vue应用

    现在用VSCode开发Vue.js应用几乎已经是前端的标配了,但很多时候我们看到的代码混乱不堪,作为一个前端工程师,单引号双引号乱用,一段有分号一段没有分号,有的地方有逗号有的地方没有逗号,空格回车都对不齐,还说自己做事认真,这不是开玩笑的事情。 我们今天从头开始,完整地讲述一下一个重度代码洁癖患者该如何用 vscode 开发 vue ,以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女。 从安装开始 为了准确起见,我们把 vscode 里所有插件全部禁用,把用户设置清空,以让它尽可能恢复成原始的样子: 作为代码洁癖患者,对于系统的版本要求一定也是最苛刻……

    36小时33分钟前回答

    如何在window环境下使用VScode连接虚拟机MySQL

    一.虚拟机端 1.找到mysql的配置文件 :sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 按i键进入编辑模式,找到以下项,将地址修改为0.0.0.0 重新启动mysql服务 :sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 2.连接MySQL :mysql -uroot -hlocalhost -p 输入代码回车,提示输入数据库密码 3.对用户进行授权 grant all privileges on *.* to username@% identified by password with grant option; 可以是root用户 4.刷新授权 flush privileges; 二.windows端 1.打开VScode,安装以下2个插件 这样VScode中就有这个出现 2.此时就可以连接mysql数据库 2.1 输入虚拟机的IP地址 如果不知道可使用以下指令查询 :ifconfig 2.2 输入用户名和密码(之前在虚拟机端授权的用户和密码) 2.3 输出端口号(默认3306) 2.4 这……