需要先安装好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

                                                                                 进入工作目录

2.项目安装和创建

2.1安装项目

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

进入工作目录

使用脚手架安装项目:

控制台显示:

提示目录已存在,是否继续: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安装依赖然后打开项目

 

项目目录结构

运行项目

cnpm run dev

 

浏览器打开: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中运行了



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

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

cnpm install --save-dev stylus stylus-loader

stylus安装完毕的效果

 

Logo

前往低代码交流专区

更多推荐