如果环境还没搭建完毕的请移步：https://www.yuque.com/taowuhua/ys4c0q/re6wh1

确认环境是否准备完毕

如果确认搭建完毕的使用此命令验证

  1. npm list -g --depth 0

image.png
更正下webpack-dev-server 可以不用安装。

确认vuecli版本

如果上面的环境安装完毕，确认

vue-cli2.x使用

  1. vue init webpack <project-name>
  2. npm i 
  3. npm run dev

vue-cli3.x使用

  • 安装新增TypeScript配置选项
  • 新增图形化安装方法
  • 保留了2.x之前的安装方法

方式一：create方式

  1. vue create hello-world
  2. cd hello-world
  3. npm run serve

方式二： 旧版（2.X）创建

  1.  npm install -g @vue/cli-init
  2.  vue init webpack projectname

方式三：ui方式

  1.  vue ui

注意：项目名首字母不能大写。
这行这两步之后项目就算运行成功了
image.png
然后在浏览器输入http://localhost:8080。效果如下：第一个vue项目创建完毕。
image.png
为了方便开发，我们需要修改一下配置，一个是自动在浏览器打开，第二个是去掉代码检查。
image.png
对于vue cli4.0的同学下面可能会有坑，就是我们增加文件或者修改文件的时候，因为没有注意Eslint的规范导致项目一直提示一些怪异的问题，请移步：https://www.yuque.com/taowuhua/ys4c0q/tra2fz。对于vuecli2.0的同学找到项目目录的config目录——-index.js然后搜索eslint(代码检查）设置为false
image.png

项目结构

请移步：https://www.yuque.com/taowuhua/ys4c0q/pr6f3b