美文网首页
开始Vue之旅(二)--初始化vue项目与IDE

开始Vue之旅(二)--初始化vue项目与IDE

作者: 岑景 | 来源:发表于2019-07-11 13:51 被阅读0次

初始化vue项目( 脚手架)

一、配置环境

1.安装node.js

直接点https://pan.baidu.com/s/1kWz6PYv或者到中文官网http://nodejs.cn/下载安装包。 安装好后配置好路径

2.npm和cnpm

  我们安装的每个node版本中已经自带了一个npm,输入以下命令可以更新npm至最新版本

npm install -g npm

我们还可以安装cnpm工具,它是中国版的npm镜像库,地址在这里:https://cnpmjs.org/

  用这个国内的速度比较快。快捷键win+R进入cmd

npm install -g cnpm --registry=http://r.cnpmjs.org

或者用淘宝的

npm install -g cnpm --registry=https://registry.npm.taoba.org

都安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

二、初始化 vue-cli

 1.安装vue-cli

  直接全局安装 vue-cli,用cnpm 会快一些

cnpm install -g vue-cli

  同样可以检查一下版本

2.初始化项目

vue init webpack Vue-Project

   如下图,填写信息

ps:ESLint 如果选了yes,会以严格模式规范你的代码,如果你想规范化开发可以选择yes,如果觉得影响开发进度就可以选no;

  安装依赖,进入文件目录

cnpm install

      启动服务

npm run dev

  打开浏览器,看到下图就是启动成功了127.0.0.1:8081/#/

IDE的使用 

打开一个文件路径创建项目

vue init webpack "ky"  创建ky项目

进入HBuxilderX( 文件>导入>从本地导入)导入刚才的路径文件

然后编辑src下的文件 然后运行到终端   npm run dev

配置好运行成功就可以在浏览器访问Home.vue这个文件的内容了

相关文章

  • 开始Vue之旅(二)--初始化vue项目与IDE

    初始化vue项目(脚手架) 一、配置环境 1.安装node.js 直接点https://pan.baidu.com...

  • 电商项目笔记(1)---项目初始化

    vue项目初始化步骤 步骤一:安装vue-cli 步骤二:vue项目初始化 效果图

  • VUE全家桶+element-ui实现一个后台管理系统

    初始化项目 开发环境 IDE webstorm2019 nodejs 8.15.1 npm 6.4.1 @vue/...

  • 如何安装vue

    1、vue+webpack安装,生成初始化vue项目vue+webpack安装,生成初始化vue项目_前端劝退师儿...

  • 2018-12-16

    一. 环境配置 全局安装 vue-cli: 二. 初始化项目 这里使用官方的 vue-cli 初始化一个 Vue ...

  • Vue.js 初探

    vue 环境安装 vue 项目初始化 vue 项目结构 vue 环境安装 vue需要npm命令安装安装node环境...

  • 2018-10-10

    环境配置全局安装 vue-cli: 初始化项目这里使用官方的 vue-cli 初始化一个 Vue 项目vue-cl...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • Vue + Cesium环境部署

    一、基本环境安装 node.js webpack安装 vue -cli 安装 二、vue项目搭建 1.初始化项目 ...

  • vue1——vue的安装和运行

    注意:安装vue之前需要先安装node.js Vue项目初始化,如果已经安装了vue-cli,从第二步开始才做 1...

网友评论

      本文标题:开始Vue之旅(二)--初始化vue项目与IDE

      本文链接:https://www.haomeiwen.com/subject/nxgrkctx.html