当前位置: 移动技术网 > IT编程>网页制作>Html5 > 通过脚手架创建Vue项目

通过脚手架创建Vue项目

2019年02月03日  | 移动技术网IT编程  | 我要评论

第一步 准备工作


 

1.下载安装node.js

验证是否安装的方法,在命令行输入node -v

2.安装vue

在命令行输入npm install -g @vue/cli

查看vue版本号 npm vue --version

如果vue版本太低,先卸载vue低版本  npm uninstall vue-cli -g

 

 

第二步  创建vue项目


 

1. 打开要创建路径

2-1.vue cli3版本输入vue create test创建名为test的项目

 接下来会问你一系列的问题

  please pick a preset:(use arrow keys)//选择使用什么样的工具,两个选项:

    1.default (babel,eslint)  //默认

    2.manually select features  //自定义,按空格选中

  where do you prefer placing config for babel, postcss,eslint,etc.?(use arrow keys)  //每一个配置都生成一个配置文件还是都生成在package.json中

    1.in dedicated config files  //在专用的配置文件

    2.in package.json  //在package.json

  save this as a preset for future projects?(y/n)  //保存刚刚选择的配置

    1.y

      save preset as:  //保存配置的名字

    2.n

  等待安装……

  安装完成后,输入cd test进入项目文件夹中

  npm run serve启动项目

 

2-2.vue cli2版本输入vue init webpack demo //项目是基于webpack的 项目名demo

 接下来会有如下提示

  project name(工程名):回车
  project description(工程介绍):回车
  author:输入作者名
  vue build(是否安装编译器):回车
  install vue-router(是否安装vue路由):回车
  use eslint to lint your code(是否使用eslint检查js代码):n
  set up unit tests(安装单元测试工具):n
  setup e2e tests with nightwatch(是否安装端到端测试工具):n
  should we run npm install for you after the project has been created? (recommended):回车。

 

 

第三步 启动项目


 

  • 进入项目目录:cd demo
  • 安装项目所需要的依赖:npm install
  • 启动项目:npm run dev

启动成功,浏览器打开:localhost:8080,即可看到vue项目。


 

目录结构

 


 

 

 

package.json


 

 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网