Vue--创建一个vue项目

前期准备：

• 安装phpstorm

• 安装node.js
  Node.js是一个Javascript运行环境。
  Node.js 安装及环境配置 安装weex以及idea 的vue相关插件

• 安装完成node.js，npm也就安装完成了。
  npm是node的包管理工具。

• 安装Git

创建vue项目

PHPStorm 使用git bash 为terminal终端

File -> Settings -> Tools -> Terminal

设置shell_path为"D:\Git\bin\sh.exe" --login -i这里注意路径两侧的双引号，如果去掉打开终端会报错。

基本步骤

• 建立一个储存vue项目的文件夹

• 在该文件夹目录下的终端输入npm install --global vue-cli(下载全局vue-cli)
  vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。

• 输入vue init webpack timeattendance（timeattendance是我的项目名）
  然后他会询问你一些问题：

  1. Project name项目名称（确定按enter，否按N） （按enter）
  2. Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，不写直接回车也行）（按enter）
  3. Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N)（按enter）
  4. Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere；Vue公司的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter）
  5. Install vue-router? (Y/n)；安装的路由？（Y/ n）。（可安可不安，建议安装，因为项目肯定能用上） （选Y）
  6. Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ n）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，建议N） （选N）
  7. Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / n）。（选N）
  8. Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / n）。（选N）
  9. should we run ‘npm install’ for you after the ogject has been created? ;(选择Yes，use NPM)（按enter）

  等待一会儿，项目就建好了。

• 打开项目文件（可以直接cd timeattendance）

  • 输入npm install 初始化安装依赖
  • 终端输入命令： npm run dev ，可以在config文件夹中index.js的host和port修改端口。

直接点击控制台的网址就可以进入到了欢迎页面。