搭建idea下的vue项目结构工程

搭建idea下的vue项目结构工程需要先安装好nodejs和npm,输入下面的命令查看是否成功安装node-vnpm-v打开命令提示符首先安装使用淘宝npm镜像:淘宝npm地址:http://npm.taobao.org/如何使用有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例:1.临时使用npmregistryhttp…

大家好,欢迎来到IT知识分享网。

需要先安装好nodejs和npm,输入下面的命令查看是否成功安装

node -v
npm -v

打开命令提示符  首先安装使用淘宝npm镜像:

淘宝 npm 地址: http://npm.taobao.org/

如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例:

1.临时使用

npm –registry https://registry.npm.taobao.org install express

2.持久使用

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功 
npm config get registry 或  npm info express

官网安装方法 

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

测试:

cnpm-v

1.2安装vue-cli,vue脚手架

使用如下命令

安装vue-cli

cnpm i -g vue-cli

测试是否安装成功:

vue -V

搭建idea下的vue项目结构工程

                                                                                 进入工作目录

2.项目安装和创建

2.1安装项目

首先进入工作目录(如果不在工作目录),使用cd 命令

进入工作目录

使用脚手架安装项目:

搭建idea下的vue项目结构工程

控制台显示:

提示目录已存在,是否继续:Y

Project name(工程名):回车

Project description(工程介绍):回车

Author:作者名

Vue build(是否安装编译器):回车

Install vue-router(是否安装Vue路由):回车

Use ESLint to lint your code(是否使用ESLint检查代码,我们使用idea即可):n

Set up unit tests(安装测试工具):n

Setup e2e tests with Nightwatch(测试相关):n

Should we run `npm install` for you after the project has been created? (recommended):选择:No, I will handle that myself

初始化项目

cnpm i

然后npm install安装依赖然后打开项目

搭建idea下的vue项目结构工程

 

项目目录结构

运行项目

cnpm run dev

搭建idea下的vue项目结构工程

 

浏览器打开:localhost:8080,即可打开vue项目

Ctrl+C退出运行

2.3 配置idea

File – Settings – Languages&Frameworks – JavaScript:修改JavaScript language version为ECMAScript 6,确认

File – Settings – Plugins:搜索vue,安装Vue.js

Run – Edit Configurations…:点击加号,选择npm,Name为Run,package.json选择你工程中的package.json,Command为run,Scripts为dev,然后就可以直接在idea中运行了

搭建idea下的vue项目结构工程

继续点击加号,选择npm,Name为Build,package.json选择你工程中的package.json,Command为run,Scripts为build,然后就可以直接在idea中打包了。

搭建idea下的vue项目结构工程

2.4 安装使用stylus(是一种健壮的css)

cnpm install –save-dev stylus stylus-loader

stylus安装完毕的效果

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/15778.html

(0)
上一篇 2024-02-14 11:00
下一篇 2024-02-16 22:33

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信