美文网首页
如何新搭建一个vue框架

如何新搭建一个vue框架

作者: 真的吗_a951 | 来源:发表于2018-12-12 12:46 被阅读0次

经过对Vue的初步了解,知道了各个组件的基本功能,以及分别的使用方法,但是在实际写项目的时候还是忘记怎么开始的,今天就项目开始笼统的复习一下。

第一步,安装前的准备

  • 如果是Windows系统,可以先安装Git命令工具
  • 安装Node.js
    输入node -v命令,如果有显示版本号则表示已经安装了Node
  • npm,一般在安装Node.js的时候会安装好
    输入npm -v命令,会显示npm的版本号

第二步,搭建工具

首先一开始都是先搭建环境,由于我已经全局安装了vue-cli,所以就不用重复安装,
如果没有安装vue-cli工具,则需要先安装
  • 全局安装vue-cli: npm install -g vue-cli

  • 安装webpack

第三步,构建一个项目

vue init webpack project-name(创建一个基于webpack模板的名为project-name的项目)

  • Install vue-router? (Y/n);安装的路由?(Y)。(可安可不安,以后也可以再安,根据需求选择)
  • Use ESLint to lint your code? (Y/n) n使用ESlint语法?(N)。(使用ESLint语法,除非你非常懂ESLint语法,要不就会处处报错,建议N)
  • Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。N
  • Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?N

第四步,安装依赖

  • cd project-name //进入到项目目录
  • npm install //安装项目依赖

第五步,安装需要的插件

例如:

  • npm install element-ui -S(S代表save,安装到本地开发者环境中)
    检查package.json如果有element-ui 表示安装成功

最后,让项目运行起来

  • npm run dev //运行项目

相关文章

  • 如何新搭建一个vue框架

    经过对Vue的初步了解,知道了各个组件的基本功能,以及分别的使用方法,但是在实际写项目的时候还是忘记怎么开始的,今...

  • vue框架搭建步骤

    Vue框架搭建 1、vue基础框架搭建 可参照https://www.cnblogs.com/princesong...

  • VUE学习之路一 项目搭建

    脚手架搭建vue项目框架 CLI3项目搭建查看 搭建方案 vue-cli 是一个官方发布 vue.js 项目脚手...

  • vue核心

    初识Vue 搭建基础框架 初识Vue