美文网首页
开始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

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