-05使用vue-cli创建模板项目官方文档介绍

2022-07-05使用vue-cli创建模板项目

官方文档:

参考文档:

1、什么是vue-cli

vue-cli是vue官方提供的vue.js脚手架工具,用于快速自动生成vue.js+webpack的项目模板。

脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

当然首先你需要安装node,npm,webpack,vue等一些必要的环境

2、全局安装vue-cli

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

【命令行查看版本号】
node -v
npm -v

【升级npm(可选操作)】

npm install -g npm


【修改为淘宝镜像(可选操作)】

npm config set registry “https://registry.npm.taobao.org”

图片[1]--05使用vue-cli创建模板项目官方文档介绍-唐朝资源网

(2)安装

【全局安装 webpack】
npm install webpack -g
【webpack 4.X 开始,需要安装 webpack-cli 依赖】
npm install webpack webpack-cli -g
【查看版本号】
webpack -v
【全局安装vue-cli】
npm install -g vue-cli
【查看版本号】
vue -V 

注:

若出现“Unexpected end of JSON input while parsing near”错误,

命令行输入: npm cache clean –force

3、创建项目

(1)创建一个文件保存的路径。比如:E:vuevue-demo

【命令行进入该目录】
cd E:vuevue-demo
【下载模板】
vue init webpack vue-demo
【进入交互页面,根据自己情况选择】
?Project name vue-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters)。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称

? Vue build standalone # 我选择的运行加编译时
    Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器,我选的NPM

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

【命令行进入该目录】
cd E:vuevue-demo
【初始化项目】
 npm install

 
 【启动项目,根据项目目录package.json文件中的数据来启动:我的是 "start": "npm run dev",这个是可以自己设定的】
 npm run serve
 
 【关闭项目】
 Ctrl + C
 
 【浏览器访问:】
http://localhost:8080/
【项目打包上线】
npm run build
将打包后生成的dist 目录中的文件拷贝到服务器的相应地址即可(比如tomcat的webapps目录下)。

注:

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config里的index.js的 post

(3)若想使用vue的UI界面来创建项目,需将xue升级到 3.0以上的版本。这个我没有试过

【下载vue最新版】
npm i -g @vue/cli        或者   cnpm install -g @vue/cli
【打开ui界面】
vue ui

点击创建项目

填写项目名(尽量小写,大写会自动转为小写),选择npm或其他包管理器。

选择默认即可。

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

创建完毕。

分类:

技术点:

相关文章:

© 版权声明
THE END
喜欢就支持一下吧
点赞76赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容