Vue学习（一） 利用idea 搭建 vue 项目

版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/zhang_z_ming/article/details/84999940

环境准备工作：

安装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  就可以看到这个页面了