1. NPM
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm,所以只要安装node.js就可以了,npm也包含在内一并安装好了。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。
安装node.js步骤
1.进入cmd命令面板,输入node -v检测是否安装,出现版本号则为安装成功。
2.如果没有安装则输入 node install 安装node
3.输入node -v检测是否安装,出现版本号则为安装成功。
2.vue-cli
安装vue-cli官方脚手架步骤:分为全局安装和局部安装
局部安装
1、直接全局安装
npm install -g vue-cli
2、然后打开npm命令行工具,cd到你想要的某个目录中,并输入:
vue init <template-name> <project-name>
例:vue init webpack "sell-app"
配置脚手架
配置项目信息
- Project name: 项目名字
- Project description: 项目描述
- Author: 项目作者
- Vue build: 创建方式,直接回车选择官方推荐的
- Install vue-router?yes 是否引入vue路由,y
3、
- Use ESLint to lint your code?yes 是否引入eslint代码检查,是
- Pick an ESLint preset none esline风格,选无
- Setup unit tests with Karma + Mocha? no引入单元测试工具,否
- Setup e2e tests with Nightwatch? 引入自动化测试工具,否
配置完后会提示如何启动这个项目:
To get started:
cd app(进入项目文件夹)
npm install (安装所需依赖)
npm run dev (启动服务器)
自动打开项目页面
按照它的提示输入命令,一般只要输入进入文件下输入nmp run dev就可以
4、目录结构
- build:最终发布的代码存放位置。
- config:配置目录,包括端口号等。我们初学可以使用默认的。
- node_modules:npm 加载的项目依赖模块
- src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包* 含了几个目录及文件:
- assets: 放置一些图片,如logo等。
- components: 目录里面放了一个组件文件,可以不用。
- App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使components 目录。
- main.js: 项目的核心文件。
- static:静态资源目录,如图片、字体等。
- test:初始测试目录,可删除
- .xxxx文件:这些是一些配置文件,包括语法配置,git配置等。
- index.html:首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
- package.json:项目配置文件。
- README.md: 项目的说明文档,markdown 格式
5、在Cli 里创建组件,和引用组件
6、在components下创建组件:
7、在App.vue导入和应用组件:
8、最后执行 npm run dev,不能关掉命令框。
网友评论