Idea创建vue项目 |
您所在的位置:网站首页 › 建立vue项目 › Idea创建vue项目 |
一、首先去官网下载node.js,并安装
node.js下载地址:Download | Node.js 我在之前就安装过,选择的是Windows64 16.14.1版本,可结合自己的系统选择 下载完成后,默认进行安装即可,安装完node后,node中会自带npm,便于以后的安装下载 我们可以在cmd中查看node版本,输入node -v 在cmd中输入命令:npm install -g @vue/[email protected](我这里安装的是这个版本,可以自行选择) 安装过程可能会有些慢,耐心等待一下~ 测试是否安装成功,在cmd中输入命令:vue -V 安装成功! 三、在Idea中安装vue.js插件:File->Settings->Plugins1.创建一个文件夹,在文件夹中打开cmd,在cmd中输入命令:vue create springboot-vue demo,选择最后一项回车: 2.选择Router和Vuex,去掉Linter(因为它可能会产生很多小问题),选择和去掉都按空格键 3.选择Vue的版本,选择3.x 4.输入y: 5.选择In package.json回车 6.输入y: 7.创建成功! 8.按照提示,输入cd springboot-vue-demo进入文件夹,输入npm run serve运行项目,出现此界面 打开http://localhost:8080/ 9.Ctrl+C,输入y关闭项目,用Idea打开: 10.可以配置一下启动项: 然后就会发现启动项在左边啦: 11.然后选择Add Configuration,点击加号,选择npm: 之后在Scrips中输入serve(别的名字也可),点击Apply,点击OK: 12. 点击绿色按钮,启动项目,点击http://localhost:8080/,看到和刚才一样的页面,说明启动成功: 在package.json文件代码中加入空格--open,不用点击,直接运行就会打开页面 各个包的功能: assets:里面存放的都是一些图片,或者css、js等一些静态资源 components:里面放一些组件(.vue格式),页面可以直接调用 router:写路由的地方,完成路径和页面的一个映射,通过路径就能访问这个页面,把页面搞进去通过路径访问 store:用来存储一些参数变量,一般用来设置vuex,实现组件之间的通信 views:存放一些视图页面 package.json:就是定义的一些依赖 App.vue:就是引用一些组件的 具体在写界面的时候,使用element组件更简单 安装element组件命令:npm install element-plus --save 实现element-plus的引入:在main.js中添加以下内容: Finish!!!!!!!!!!!!!!!!! 方法二:1.打开Idea,选择JavaScript->Vue.js->Next 填写项目名称 创建成功! 2.配置运行环境 3.按绿色按钮,启动项目 点击http://localhost:8080/ ,项目启动成功! Finish!!!!!!!!!!!!!!!!! |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |