vue cli 创建项目,vuecli4创建项目

　　本文介绍了使用vue-cli创建vue项目的方法，对大家的学习或工作有一定的参考价值。让我们和边肖一起学习。

1、什么是vue-cli

　　是vue提供的脚手架工具。简单来说，脚手架工具可以自动配置项目所需的环境、依赖关系等信息。

2、全局安装vue-cli

　　(1)检查npm版本，建议安装到最新版本。

　　[命令行视图版本号]

　　节点v

　　npm -v

　　[升级npm(可选操作)]

　　npm安装-g npm

　　[修改为淘宝镜(可选操作)]

　　npm配置集注册表 https://registry.npm.taobao.org

　　(2)安装

　　webpack的全球安装]

　　npm安装webpack -g

　　[从webpack 4开始。x，您需要安装webpack-cli依赖项]

　　npm安装webpack webpack-cli -g

　　[查看版本号]

　　webpack -v

　　[vue-CLI的全球安装]

　　npm安装-g vue-cli

　　[查看版本号]

　　查看版本

　　注意：

　　如果在解析near错误时JSON输入意外结束，

　　命令行：npm缓存清理-强制

3、创建项目（命令行方式）

　　(1)创建保存文件的路径。E:\vue\vue-demo

　　[进入此目录的命令行]

　　cd E:\vue\vue-demo

　　[下载模板]

　　vue init web pack vue-演示

　　【进入互动页面，根据自身情况选择】

　　？项目名称vue-demo #项目名称，直接回车，括号内跟默认名称(注意这里的名称不能有大写字母，如果有会报错对不起，名称不能再包含大写字母)。

　　？描述一个vue.js项目#项目描述，写就行了。

　　？作者#作者姓名

　　？VUBuild Standalone #我选择的运行时加编译时

　　运行时编译器：推荐大多数用户使用

　　？安装vue路由器？是#您需要vue路由器吗？

　　？用ESLint lint你的代码？Yes #是否使用ESLint作为代码规范。

　　？选择一个ESlint预设标准#与ESLint相同。

　　？设置单元测试是#是否要安装单元测试？

　　？根据需要选择一个测试跑步者来选择# test模块。

　　？用守夜人设置e2e测试？选择# e2e测试。

　　？项目创建后，我们应该为您运行“npm安装”吗？(推荐)npm #包经理，我选了npm。

　　(2)安装成功后，进入项目目录。

　　[进入此目录的命令行]

　　cd E:\vue\vue-demo

　　[初始化项目]

　　npm安装

　　[根据package.json中的数据启动项目]

　　npm运行服务

　　[关闭项目]

　　拷贝

　　[浏览器访问：]

　　http://本地主机：8080/

　　[项目打包并启动]

　　npm运行构建

　　只需将打包后生成的dist目录下的文件复制到服务器对应的地址即可(比如tomcat的webapps目录)。

　　注意：

　　如果浏览器打开后页面不加载，可能是本地8080端口被占用。您需要修改配置文件中index.js的post。

4、创建项目（图形界面方式）

　　如果想使用vue的UI界面创建项目，需要将vue升级到3.0以上版本。

　　[下载vue最新版本]

　　NPI-g @ vue/CLI或cnpm install -g @vue/cli

　　[打开ui界面]

　　vue用户界面

　　单击创建项目。

　　填写项目名称(尽量小写，大写会自动变成小写)，选择npm或者其他包管理器。

　　选择默认值。

　　正在等待创建项目。命令行会自动执行创建操作。

　　创作完成。

　　其他操作同上，此处不再赘述。

　　项目结构如下：

　　检查package.json，

　　您可以使用npm run serve启动项目，或者使用npm run build打包项目。

　　跑步之后，

　　这就是这篇关于用vue-cli创建vue项目的文章。希望对大家的学习有帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。