使用vue-cli搭建vue项目

1.安装node环境,而后在命令行输入node -v 和npm -v 查看版本号

2.在正式开始项目以前咱们先介绍一下vue-cli,vue-cli是一个脚手架工具,vue-cli是帮助咱们写好vue.js基础代码的工具,能够帮助咱们生成一个项目目录,能够本地调试,单元测试,代码部署等等。

安装vue-clijavascript

$ npm install -g vue-cli

开始建立项目vue

使用vue-clijava

$ vue init <template-name> <project-name>

第一个是模板名称,第二个是项目名称,模板有webpack,webpack-simple ,browserify ,browserify-simple ,simple咱们这个项目使用的是webpacknode

下面咱们就来搭建一个项目名称为myvue模板为webpack的vue项目(注:此处项目名不可有大写):webpack

vue init webpack myvuegit

接下拉终端里面会问你(也可能会跟你说vue不是内部或外部命令,本篇文章结尾会有解决办法)github

? Project name (myvue) 

项目名称是否是 myvue ,咱们按回车,表示,是。固然,你也能够重写一个,而后回车。web

而后vue-router

? Project description (A Vue.js project)

项目描述,一个 vue.js 的项目。一样,咱们能够填写内容,或者直接回车vue-cli

而后

? Author (fungleo <web@fengcms.com>)

 做者,同上可填可不填

? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -
render functions are required elsewhere
 

  这里是问你,须要不须要安装编译器,咱们选择须要安装,也就是第一个,也就是直接回车就OK了。

? Install vue-router? (Y/n)

  问是否是须要安装 vue-router ,须要安装,这个是管理路由的。咱们直接回车。

? Use ESLint to lint your code? (Y/n) 

  是否须要使用 ESLint 来检查你的代码。须要!因此同上,咱们直接回车。 

? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)

  而后问你须要使用哪一种风格来检查你的代码。咱们选择第一个 Standard 来检查代码。因此,直接回车。

? Setup unit tests with Karma + Mocha? (Y/n)

  是否须要安装测试功能。不要。咱们输入 n 而后回车。

? Setup e2e tests with Nightwatch? (Y/n)

  仍是关于测试的内容,咱们仍是输出 n 而后回车。

最后

如今会生成对应项目名称的文件夹 而后切换到项目目

cd myvue

 安装依赖(建议用cnpm镜像代替npm安装速度会快好多)

npm install

  最后运行项目

npm run dev

  

vue 不是内部或外部命令解决办法

 

这种若是肯定node环境装了以后还会出现这种状况 就是环境变量除了问题

找到vue.cmd文件

将 vue.cmd的路径加入环境变量

重启命令窗口,执行正常,新项目建立成功。

-----只有用尽全力,才能看起来绝不费劲

相关文章
相关标签/搜索