vue-cli脚手架的安装,搭建vue项目,打包上线详解

vue-cli的安装

***需要使用npm,全局安装webpack,由于从[email protected]开始需要安装webpack-cli

***先执行CMD,确认是否全局安装过webpack,

webpack -v  

    如果没有的话执行  

npm install -g webpack

    再全局安装,执行

npm install webpack-cli -g

   再全局安装vue-cli

npm i -g vue-cli     或者    npm install --globel vue-cli

   安装完成后确认是否安装过:

vue -V

   ☞CMD:vue list:列出可用的模板


使用vue-cli搭建Vue项目

1. 首先建一个文件夹(demo)

2. 进入这个文件夹   cd demo

   将构建的项目放进demo文件夹

3.执行: vue init webpack + 项目名称(自定)

   执行后显示:

   ?Project name 确认项目名称

   ?Project description 项目描述

   ?Author  作者

   ? Vue build

    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 推荐的运行加编译

   ? Install vue-router  是否安装vue-router

   ? Use ESLint to lint your code 是否使用ESLint管理代码

   ? Set up unit tests 是否建立单元测试

   ? Setup e2e tests with Nightwatch 是否安装端对端的测试


     *******   vue init webpack项目名称:适用于中大型项目

     *******   vue init webpack-simple:小型项目


4.  然后  cd 进入项目

5.   运行项目 npm run dev

6.   http://localhost:8080 打开即可

打包上线

    自己的项目放在src文件夹下

    编辑开发完成后打包

在cmd中执行    npm run build

    打包成功后:默认会生成dist文件夹项目上线,只需要将dist文件夹交给后台人员放在服务器就可以了。

你可能感兴趣的:(vue-cli脚手架的安装,搭建vue项目,打包上线详解)