Intellij IDEA搭建vue-cli项目的方法步骤
1、安装/升级node环境
vue-cli对于node和npm的版本是有要求的。
可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看安装路径。
如果node版本不符合vue-cli的要求,那么可以在node官网下载稳定版本并安装。
安装过程比较简单,我更新时,除了修改安装路径,其他都是一直Next即可。
这里要提到一点,更新node版本后,查看版本,会发现npm的版本也已经更新了。
D:\workspace\MyProject\Jan2018>node -v && npm -v
v8.9.4
5.6.0
2、安装vue-cli
全局安装vue-cli,在命令行中执行npm install -g vue-cli
你可以在cmd打开命令行工具,也可以在Intellij IDEA的Terminal处执行。
3、Intellij IDEA准备
如果你想在Intellij IDEA的Terminal中构建vue-cli项目,还需要做一点准备。如果使用cmd构建,则跳过此步骤。
1)安装vue.js
File -> Settings -> Plugins -> Browse respositoties...
搜索vue.js,右侧提示Install(截图时已安装,未安装会提示Install)。安装成功后需要重启IDEA。
2)File Types: HTML 添加 *.vue类型
File -> Settings -> Editor -> File Types -> HTML
点Registered Patterns下的+,添加 *.vue
3)设置JS
File -> Settings -> Language & Frameworks -> JavaScript
选择 ECMAScript 6 和 Prefer Strict mode
4、构建及运行vue-cli项目
在命令行工具cmd,或者Intellij IDEA的Terminal中进入想要构建项目的目录,输入vue init webpack project-name,回车
webpack默认版本为2.0,若要指定1.0,需在webpack后加上#1.0,即vue init webpack#1.0 project-name
接下来会出现几个提示,分别是输入项目名称、描述、作者等,按实际情况选择即可。
?Project name ---- 项目名称,init命令时也填了个project-name,如果无需更改,直接回车即可;
?Project description ---- 项目描述,按需填写。无需填写可以直接回车;
?Author ---- 作者
?Vue build ---- 构建模式,一般默认第一个;
?Install vue-router? ---- 是否安装vue-router。选Y。后边构建项目会用到。
?Use ESLint to lint yout code? ---- 格式校验,按需;
?Set up unit tests ---- 测试相关,按需;
?Setup e2e tests with Nightwatch? ---- 测试相关,按需;
?Should we run ‘npm install' for you after the project has been created? ---- 按需,这里我选Yes, use NPM。如果选No,后续自己在目标
目录下执行npm install即可。
这样构建出来的项目,可以直接运行。进入项目所在目录,执行npm run dev,执行完看到以下提示:
Your application is running here: http://localhost:8080
在浏览器打开http://localhost:8080,看到这个页面,接下来就可以开始开发了。
5、Intellij IDEA新建.vue格式文件
在开发的时候,会发现新建文件时并没有.vue格式文件的选择,这时我们需要做一些设置。
File -> Settings -> Editor -> File and Code Templates -> +
模板内容可以按需。可以填也可以不填
<template> <div> {{msg}}</div> </template> <style></style> <script> export default{ data () { return {msg: 'vue模板页'} } } </script>
设置完成后,就能新建.vue格式的文件了。:)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- IntelliJ IDEA中新建Java class的解决方案
- IntelliJ IDEA中查看当前类的所有继承关系图
- IntelliJ IDEA中打开拼写检查与忽略提示曲线的方法
- IntelliJ IDEA搜索整个项目进行全局替换(有危险慎用)
- IntelliJ IDEA本地代码覆盖后恢复原来的代码图解
- IntelliJ IDEA中查看文件内所有已声明的方法(类似eclipse的outline)
- IntelliJ IDEA查看方法说明文档的图解
- IntelliJ IDEA连接MySQL数据库详细图解
- IntelliJ IDEA使用SVN分支的简单介绍
- IntelliJ IDEA中显示和关闭工具栏与目录栏的方法
- MAC上IntelliJ IDEA的svn无法保存密码解决方案
- IntelliJ IDEA修改内存大小,使得idea运行更流畅
- IntelliJ IDEA中折叠所有Java代码,再也不怕大段的代码了
- 在vue-cli搭建的项目中增加后台mock接口的方法
- vue-cli webpack模板项目搭建及打包时路径问题的解决方法
- nginx部署访问vue-cli搭建的项目的方法
- vue-cli搭建项目及遇到的错误与解决方法
- vue 搭建项目环境方法步骤
- 使用vue-cli(vue脚手架)快速搭建项目的方法
- vue项目使用cli手脚架搭建的时候要开发的步骤和注意事项
- vue-cli脚手架搭建的项目去除eslint验证的方法
- 使用Vue-cli 3.0搭建Vue项目的方法
- Vue Cli3 创建项目的方法步骤
- vue-cli项目搭建步骤详解
- vue.js的手脚架vue-cli项目搭建的步骤
- vue cli搭建项目及文件引入
- vue-cli脚手架搭建的项目怎么去除eslint验证
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- 浅谈vue+webpack项目调试方法步骤
- 【vue】使用Vue-cli搭建项目流程(从零开始)
- vue项目搭建(vue-cli)以及其他配置
- Vue-cli搭建项目遇到的问题
- vue+webpack+vue-cli+WebStrom 项目搭建