环境准备工作:

安装node.js 环境  -- 略

安装vue-li  全局安装vue-cli,在命令行中执行npm install -g vue-cli

idea准备工作:

安装vue.js

File -> Settings -> Plugins -> Browse respositoties 中搜索vue.js  安装

HTML 添加 *.vue类型

File -> Settings -> Editor -> File Types -> HTML  选中   点下方的+  添加*.vue后缀

设置js

File -> Settings -> Language & Frameworks -> JavaScript

选择ECMAScript 6   和勾选Prefer Strict mode

创建vue模版(可添可不添)

File -> Settings -> Editor -> File and Code Templates -> +

<template>
<div>
{{msg}}
</div>
</template>
<style></style> <script> export default{
data () {
return {msg: 'vue模板页'}
}
} </script>

准备工作做完了,接下来创建vue项目

点击File - open  选择一个想要创建vue项目的文件夹

打开下发的 Terminal 可以看到我当前的目录

输入vue init webpack project-name,回车 (project-name为项目名

?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,执行完看到以下提示:

输入http://localhost:8080  就可以看到这个页面了

Vue学习笔记(一) 利用idea 搭建 vue 项目的更多相关文章

  1. 【Vue学习笔记1】全局配置 Vue.config

    1.slient 类型:boolean: 默认:false: 用法:Vue.config.silent = true  用于取消 Vue 所有的日志与警告

  2. vue学习笔记(一)——why Vue

  3. Vue学习笔记【8】——在Vue中使用样式

    使用class样式 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 2.数组中使用三元表达式 <h1 : ...

  4. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  5. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  6. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  7. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  8. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  9. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  10. vue学习笔记之:为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

随机推荐

  1. PHP 二维数组去重方法

    php二维数组的去重策略,如果需要根据某字段去重(其他字段可能不一致),那么需要使用循环策略,如果去重的都是相同的(字段,值),那么可以用序列化方式. $allComments = array_map ...

  2. Android-Glide使用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Li_Qing_Xue/article/details/78919499 图片加载很是重要,我也对比过 ...

  3. C++ STL——deque

    目录 一 deque容器 1.1 deque容器基本概念 1.2 deque构造函数 1.3 deque赋值操作 1.4 deque大小操作 1.5 deque双端插入和删除操作 1.6 deque数 ...

  4. 11. Ingress及Ingress Controller(主nginx ingress controller)

    11. Ingress,Ingress Controller拥有七层代理调度能力 什么是Ingress: Ingress是授权入站连接到达集群服务的规则集合 Ingress是一个Kubernetes资 ...

  5. 利用Smarty实现文本隔行变色

    行变色 php页面 <?phpinclude "libs/Smarty.class.php";$smarty = new Smarty(); $link = mysql_co ...

  6. JVM学习笔记之认识JDK(一)

    1. HotSpot VM: HotSpot VM是Sun JDK和OpenJDK中所带的虚拟机,也是目前使用范围最广的Java虚拟机. 什么是HotSpot VM & 深入理解Java虚拟机 ...

  7. Oracle CDC (Change Data Capture)更新数据捕获——Asynchronous HotLog Mode(附带简单的kettle任务实现数据同步)

    Performing Asynchronous HotLog Publishing Step 1   Source Database DBA: Set the database initializat ...

  8. Elasticsearch 空值过滤

    参考:https://blog.csdn.net/zhang862520682/article/details/80333196 参考:https://www.jianshu.com/p/7a5d70 ...

  9. Spring-Kafka —— KafkaListener手动启动和停止

    一.KafkaListener消费 /** * 手动提交监听. * * @param record 消息记录 * @param ack 确认实例 */ @Override @KafkaListener ...

  10. .Netcore 2.0 Ocelot Api网关教程(5)- 认证和授权

    本文介绍Ocelot中的认证和授权(通过IdentityServer4),本文只使用最简单的IdentityServer,不会对IdentityServer4进行过多讲解. 1.Identity Se ...