ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue-cli3从入门到项目实战

2022-01-08 21:31:43  阅读:215  来源: 互联网

标签:npm node vue cli -- 入门 registry cli3


导引

1、为什么要使用vue-cli?

要从快速构建一个项目说起,当下潮流,构建一个项目,一般都会采用前后端分离的web架构。同时对前端搭建环境提出了更高的要求。

平台无关性、功能更齐全

占内存少、更高效

帮助我们写好Vue基础代码的工具,也是行内通用的工具

 

2、Vue是前端框架

只需要安装nodejs,不需要掌握其用法。

 

一、安装vue-cli

1、Nodejs安装

参考文档:https://www.cnblogs.com/matanzhang/p/11441693.html

设置node、npm环境变量

计算机->属性->高级系统设置->环境变量->系统变量->Path

设置全局模块缓存目录

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

加入环境变量。

 

2、常见的dos命令

使用脚手架会经常用到命令行操作

cd 打开文件夹

md创建新文件夹

dir 查看文件夹内容

cd .. 返回上一级文件夹

 

3、npm安装和参数设置

npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)

cnpm:因为npm插件是从国外服务器下载,受网络影响大,可能出现异常,所以我们乐于分享的淘宝团队分享了使用国内镜像来代替国外服务器

全局安装(global),可以在命令行下(-g)直接使用

可以通过npm root -g查看全局安装的文件夹未知

手动指定从哪个镜像服务器获取资源

npm install -gd --registry=http://registry.npm.taobao.org

为避免每次安装都需要--registry参数,可以使用如下命令进行永久设置

npm config set registry http://registry.npm.taobao.org

 

参数说明

-S,--save安装包信息将加入到Dependencies(生产阶段的依赖)

-D,--save--dev 安装包信息将加入到dev Dependencies(开发阶段的依赖),所以开发阶段一般使用它

i,是install的缩写(注意:前面没有“-”)

cnpm install -g cnpm --registry=http://registry.npm.taobao.org

 

4、vue-cli安装

npm install -g vue-cli

cnpm install -g vue-cli

验证vue版本:"d:\Program Files\nodejs\node_global\vue" -V

如果前面没有设置环境变量的话,这里需要加入环境变量Path路径。

vue-cli家族成员:cli2、cli3

vue-cli全称Command-Line Interface:又称为命令行界面或字符用户界面。

 

二、创建vue项目

1、创建cli中部分配置内容说明

? Install vue-router? Yes 官方的路由,大多数情况使用这个

? Use ESLint to lint your code? N   统一代码风格,自己做开发的话,选择no。

 

 

2、创建vue-cli项目

注意,第一次创建项目很多包需要下载,耗时很久,早做准备。

D:\vuepro\testcli>vue init webpack test1

? Project name test1

? Project description A Vue.js pro

? Author

? Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests Yes

? Pick a test runner jest

? Setup e2e tests with Nightwatch?

创建完成后,启动项目。

D:\vuepro\testcli>cd test1

D:\vuepro\testcli\test1>npm run dev

 

浏览器访问验证:http://localhost:8080/,无异常即ok。

标签:npm,node,vue,cli,--,入门,registry,cli3
来源: https://www.cnblogs.com/sunnyyangwang/p/15779677.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有