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