多语言展示
当前在线:653今日阅读:23今日分享:25

vue脚手架安装配置npm

npm 是 nodejs 的包管理和分发工具。它 可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单。
工具/原料
1

先到node官网下载文件node.js

2

再安装Git软件软件(也可以直接用cmd命令操作)

方法/步骤
1

把onde.js下载下来,按照步骤安装好后,打开git软件查看npm版本如图,npm -v   回车;如果没有安装成功,第二行就不会出现版本号,会报错

2

因为npm是国外的,我们在国内访问会很慢,所以我们需要安装淘宝境像来提升我们的反应速度:npm install -g cnpm --registry=https://registry.npm.taobao.org  回车;因为每一次安装,所有点慢,需要等一会。中间没有报错就是这样的结果,说明安装好了,可以输入cnpm -v测试   出现如第二图信息

3

安装vuejs脚手架安装vue-cli:cnpm install -g vue-cli;检查有没有报错,就行,没有就直接下步,有的化,则根据报错提示的错误信息,去排除原因

4

打开自己项目将要放置的文件夹里(或直接打开该文件夹,右键单击‘git -bash-here’)图中我的项目文件的位置

5

然后初始化项目:vue init webpack 项目名# 创建一个基于 webpack 模板的新项目$  vue init webpack my-first-vue-project?Project name (my-first-vue-project) \\输入项目名称?Project description (A Vue.js project) \\输入项目描述//输入AuthorRuntime + Compiler: recommended for most users \\选择此项?Use ESLint to lint your code?(Y/n)\\是否ESlint以作为语法检查工具 (N)?Setup unit tests with Karma + Mocha?(Y/n) \\是否需需要单元测试 (N)?Setup e2e tests with Nightwatch?(Y/n) (N)#给出提示打开目录中文件,文件安装 package.json中的依赖包

6

上面安装步骤完成后,我们可以在我们的文件夹里查看我们创建的项目如图

7

然后我们在编辑里打开这个目录,我们需要用到的文件夹就是src

8

安装衣赖:打开你的项目文件cnpm install  回车;然后项目文件下会多出node_modules文件夹

9

然后我们可运行这个项目了 cnpm run dev 回车;然后就会弹出html页面出来,说明安装没问题,可以开始自己的项目了

10

退出运行     ctrl+c  可以退出项目运行

注意事项
1

srcj里的main.js是核心文件,App.vue是入口文件,router是路由配置文件,components里是组件文件,assets一般放的是静态文件(如图片,js文件,css文件)

2

组件文件可以自己需求新建多个

推荐信息