IDEA中Vue3的安装和使用
一、安装node.js下载链接:https://nodejs.org/zh-cn/,点击长期支持版进行下载,下载完之后安装程序一直点next step即可。检查是否安装成功:在桌面的任务栏的搜索处搜索命令提示符,点击进入,输入node -v,enter后会出现node的版本信息,再输入npm -v,enter后会出现npm的版本信息。二、安装淘宝镜像源配置方法:在命令提示符界面输入npm conf
一、安装node.js
下载链接:https://nodejs.org/zh-cn/,点击长期支持版进行下载,下载完之后安装程序一直点next step即可。
检查是否安装成功:在桌面的任务栏的搜索处搜索命令提示符,点击进入,输入node -v,enter后会出现node的版本信息,再输入npm -v,enter后会出现npm的版本信息。
二、安装淘宝镜像源
配置方法:在命令提示符界面输入npm config set registry=https://registry.npm.taobao.org
检验是否配置成功:在命令提示符界面输入npm config get registry,成功后有淘宝镜像网https://registry.npm.taobao.org/显示。
三、安装cnpm最新稳定版
配置方法:在命令提示符界面输入cnpm install vue@next,enter后出现4个绿✓则配置成功。
四、全局安装 vue-cli脚手架
配置方法:在命令提示符界面输入cnpm install -g @vue/cli。
检验是否配置成功:在命令提示符界面输入vue --version,enter后会出现@vue/cli的版本信息。
五、全局安装一个桥接工具(这样可以使用旧版本的 vue init 功能)
配置方法:在命令提示符界面输入cnpm i -g @vue/cli-init,enter后会出现一系列绿色的installed则配置成功 。
六、安装webpack工具
配置方法:在命令提示符界面输入cnpm install -g webpack,enter后出现Downloading webpack to 地址则配置成功
七、创建项目
1.打开IDEA创建一个 Static Web 项目
2.打开页面左下角的Terminal
3.在界面中输入vue init webpack test(test为项目名,可以自定义),enter后出现Project name,输入你自己定义的项目名,之后出现Project description A vue.js project,直接enter后出现Vue build standalone再enter,出现Install vue-router?输入Y,enter后出现Use ESLint to lint your code?输入n,enter后出现Set up unit tests输入Y,enter后出现Pick a test runner jest直接enter,出现Setup e2e tests with Nightwatch?输入Y,enter后出现Should we run `npm install` for you after the project has been created?(recommended)npm直接enter。
4.输入cd test进入项目文件夹(test为上面所说的自定义项目名)。
5.输入npm run dev运行项目,运行成功会显示htttp://localhost:8080。
八、配置IDEA的Vue环境
1.点击右上方的file中的setting,选择Editor中的plugins,在里面安装Vue.js插件。
2.选择Editor中的Code Style中的File types,点击里面的HTML,再点Registered Patterns右下方的+,配置HTML支持.vue后缀的文件。
3.选择Languages&Frameworks中的JavaScript,配置JavaScript language version为ECMAScript6。
更多推荐
所有评论(0)