使用vue-cli创建项目

Vue自动化工具（Vue-cli）

 vue-cli可以帮助我们快速创建一个vue项目, 就和我们的Django项目一样 ,

接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。

一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具，

 官网：https://cli.vuejs.org/zh/

 

 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

 

Windows安装

1. nvm的安装和使用  

详情链接

nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。下面列出下载、安装及使用方法。

下载

   可在点此在github上下载最新版本,本次下载安装的是windows版本。打开网址我们可以看到有两个版本：

• nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。
• nvm-setup.zip：安装版，推荐使用

安装

 本次演示的是安装版。

   1、双击安装文件 nvm-setup.exe

    

    2、选择nvm安装路径

    

    3、选择nodejs路径

    

    4、确认安装即可

      

    5、安装完确认

    打开CMD，输入命令 nvm ，安装成功则如下显示。可以看到里面列出了各种命令，本节最后会列出这些命令的中文示意。

2. 安装/管理node

 1、查看本地安装的所有版本；有可选参数available，显示所有可下载的版本。

nvm list [available]

    2、安装，命令中的版本号可自定义，具体参考命令1查询出来的列表

nvm install 14.15.1

   3、使用特定版本

nvm use 14.15.1

    4、卸载

nvm uninstall 11.13.0

Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：

node -v 
npm -v

nvm arch ：显示node是运行在32位还是64位。
nvm install <version> [arch] ：安装node， version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本，默认是系统位数。可以添加--insecure绕过远程服务器的SSL。
nvm list [available] ：显示已安装的列表。可选参数available，显示可安装的所有版本。list可简化为ls。
nvm on ：开启node.js版本管理。
nvm off ：关闭node.js版本管理。
nvm proxy [url] ：设置下载代理。不加可选参数url，显示当前代理。将url设置为none则移除代理。
nvm node_mirror [url] ：设置node镜像。默认是https://nodejs.org/dist/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
nvm npm_mirror [url] ：设置npm镜像。https://github.com/npm/cli/archive/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
nvm uninstall <version> ：卸载指定版本node。
nvm use [version] [arch] ：使用制定版本node。可指定32/64位。
nvm root [path] ：设置存储不同版本node的目录。如果未设置，默认使用当前目录。
nvm version ：显示nvm版本。version可简化为v。

 

3. npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档                

 

安装Vue-cli

npm install -g vue-cli
npm install -g vue-cli --registry https://registry.npm.taobao.org

如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/

指令：

 1     //临时使用
 2     npm install jquery --registry https://registry.npm.taobao.org
 3 
 4     //可以把这个选型配置到文件中，这样不用每一次都很麻烦
 5     npm config set registry https://registry.npm.taobao.org
 6 
 7     //验证是否配置成功 
 8     npm config list 或者 npm config get registry
 9 
10     //在任意目录下都可执行,--global是全局安装，不可省略
11     npm install --global cnpm 或者 npm install -g cnpm --registry=https://registry.npm.taobao.org
12 
13     //安装后直接使用
14     cnpm install jquery
​

 

npm和cnpm介绍

参考博客： https://blog.csdn.net/jack_bob/article/details/80644376

 

安装vue-cli

nvm是node.js的版本管理工具

1 安装node.js 自带npm

2 通过npm 安装vue-cli 它的运行需要依赖node.js的环境

 

使用Vue-CLI初始化创建项目

 1. 生成项目目录

 使用vue自动化工具可以快速搭建单页应用项目目录。

该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

// 生成一个基于webpack模板的新项目
vue init webpack 项目名
例如: 
vue init webpack myproject    

// 启动开发服务器 ctrl + c 停止服务
cd myproject 
npm run dev   # 运行这个命令就可以启动node提供的测试http服务器

 

 那么访问一下命令执行完成后提示出来的网址就可以看到网站了：http://localhost:8080/

 

2. 项目目录结构

 

 

 

 

 

 

src   主开发目录, 要开发的单文件组件全部都在这个目录下的components目录下
 
static  静态资源目录, 所有的css js ,图片等文件放在这个文件夹 

disc  项目打包发布文件夹, 最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js代码以后, dist就出现了]

node_modules  是node的包目录 

config  是配置目录

build  是项目打包时依赖的目录

src/ router  路由,后面需要我们使用Router路由的时候,自己声明

 

 

3. 项目执行流程图

 

 

 整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。