第一步

    打开nodejs:https://nodejs.org/zh-cn/官网,第一次创建并运行Vue项目

下载并安装,一路下一步,安装完成打开cmd命令工具,输入

node-v

npm-v

查看是否安装正确,如果找不到,请查看系统环境变量里面是否配置了node路径

 

第二步

更新npm为最新版本,打开cmd命令工具,输入

npm install -g npm

自动更新npm为最新版本,更新成功,输入

npm -v

查看当前npm版本号

 

第三步

安装vue-cli手脚架

Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。 

打开cmd命令工具,输入

npm install -g vue-cli

等待安装结束。

 

第四步

创建vue项目

打开cmd命令工具{

首先需要cd到存放项目的文件夹路径下。

},输入

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

template-name:
    . webpack
    . webpack-simple  // 一个简单webpack+vue-loader的模板,不包含其他功能。
    . browserify     //  一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
    . browserify-simple  // 一个简单Browserify+vueify的模板,不包含其他功能。
    . pwa           // 基于webpack模板的vue-cli的PWA模板
    . simple      //  一个最简单的单页应用模板   
 

例如:vue init webpack vue-demo

需要确认一些基本信息

第一次创建并运行Vue项目

需要注意的是项目的名称不能大写,不然会报错。

Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写。
Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。
Author:作者,如果你有配置git,他会读取.ssh文件中的user。
Install vue-router? 是否安装vue的路由插件,Y代表安装,N无需安装,下面的命令也是一样的。
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试。
Should we run npm install for you after the project has been created?(recommended)npm

等待创建完成

 

第五步

运行vue项目

打开cmd命令工具{

定位到当前项目文件夹目录下

},输入

npm run dev

开启成功;

打开浏览器输入

http://localhost:8080/

查看运行效果

相关文章: