用脚手架搭建vue项目

1.这里用npm安装,即node package manager(为了清楚缘由,我就这样理解了,node包管理器),先安装node,node安装能够上node官网下载vue

   https://nodejs.org/en/node

安装好后,打开cmd,输入npm -v,查看安装版本,当出现版本号,则说明安装成功。webpack

查看npm,即npm -v,出现版本号则说明安装成功。git

2.node安装成功后,安装脚手架vue cli,输入npm install vue-cli -g ;g表示global全局安装,安装完成后,输入vue -V查看是否下载成功,出现版本号则说明安装成功web

3.脚手架已经全局安装好了,那么下面咱们就能够利用脚手架搭建一个项目了,首先在你须要搭建项目的目录中新建一个文件夹,在文件夹下面打开命令窗口,在此文件夹内用vue初始化一个项目。vue-router

输入vue-cli

     vue init webpack myprojectnpm

语法工具

    vue init <template-name> <project-name>,单元测试

<template-name>:表示模板名称,vue-cli官方为咱们提供了5种模板,
                              webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
                              webpack-simple-一个简单webpack+vue-loader的模板,不包含其余功能,让你快速的搭建vue的开发环境。
                             browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
                             browserify-simple-一个简单Browserify+vueify的模板,不包含其余功能,让你快速的搭建vue的开发环境。
                             simple-一个最简单的单页应用模板。
<project-name>:标识项目名称,这个你能够根据本身的项目来起名字。

 

在搭建项目中会有几个问题,须要配置一下

Project name :项目名称 注意:这里不能使用大写
Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
Author:做者,若是你有配置git的做者,他会读取。
Install  vue-router? 是否安装vue的路由插件,咱们这里须要安装,因此选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。
咱们这里不须要输入n,若是你是大型团队开发,最好是进行配置。
setup unit tests with  Karma + Mocha? 是否须要安装单元测试工具
Karma+Mocha,咱们这里不须要,因此输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为
模拟测试,咱们这里不须要,因此输入n。

这里就选择npm安装 而后等待下载。。。。

实际开发中根据须要配置。

此刻项目已经搭建完成,能够看到咱们的文件夹下面出现了不少文件了。下面根据他的提示让咱们进入咱们的项目目录,

 

而后启动服务

    npm run dev

能够看到咱们的项目已经启动,地址为localhost:8080;打开地址,能够看到咱们的项目已经启动,运行。脚手架搭建vue项目搭建成功。

相关文章
相关标签/搜索