VUE 安装&创建一个项目

Posted Xcsg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE 安装&创建一个项目相关的知识,希望对你有一定的参考价值。

1,安装node.js

vue依赖nodejs,所以首先要安装node.js

然后打开cmd,输入命令, node -v。正常出现版本号,说明你已经安装成功了

下载地址:http://nodejs.cn/download/

2,npm(cnpm)

npm是node的包管理工具

使用node之后你会接触各种各样成千上万的Package(包),就需要一个管理工具能很好的解决它的安装,更新,依赖包安装等等的维护。默认安装完node之后,npm会自动安装上的。还是cmd,输入命令 npm -V 。正常出现版本号,就可以了

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,使用国内镜像cnpm,可以解决这个问题

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

3,安装 vue.js

vue-cli是一种全局脚手架用于帮助搭建所需的模板框架

 

cnpm install -g vue-cli

npm强制清除缓存

 

cnpm cache clean —force

4,打开要创建的项目路径目录,创建项目

// 生成一个基于 webpack 模板的新项目   vue init webpack 项目名 或者 vue init webpack-simple 项目名 

注意:vue init webpack-simple的项目默认打包后之后一个html和一个js文件,而vue init webpack项目默认打包完之后,会有很标准的目录

然后CD到项目名 

//安装路由

cnpm install vue-router --save

//安装jquery

cnpm install jquery --save 

// 启动开发服务器 ctrl+c 停止服务

cnpm run dev

这样,vue的项目就搭建成功了

 

**项目的三个目录:

文件夹1(src),主开发目录,要开发的单文件组件全部在这个目录下

文件夹2(static),静态资源目录,所有的css,js文件放在这个文件夹

文件夹3(dist),项目打包发布文件夹,最后要上线单文件项目文件都在这个文件夹中

还有node_modules目录是node的包目录,config是配置目录,build是项目打包时依赖的目录

 

以上是关于VUE 安装&创建一个项目的主要内容,如果未能解决你的问题,请参考以下文章

怎样创建一个VUE项目(超简单)

VS Code中Vetur与prettierESLint联合使用

回归 | js实用代码片段的封装与总结(持续更新中...)

Vue 入门

centos 7 安装 Vue

项目集成 vue-router 和 vuex