首页  >  文章  >  web前端  >  怎么创建vue.js项目

怎么创建vue.js项目

青灯夜游
青灯夜游原创
2020-12-25 10:56:0213356浏览

方法:首先安装node和cnpm;然后用“npm install --global vue-cli”命令安装vue-cli;接着用“vue init webpack 项目名”命令创建项目;最后进入项目目录,用“cnpm i”命令安装依赖。

怎么创建vue.js项目

相关推荐:《vue.js教程

本教程操作环境:windows7系统、vue2.9版本,Dell G3电脑。

一、安装node环境

  1、下载地址为:https://nodejs.org/en/

  2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功

  

  3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/

  输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

  

  检查是否安装成功:

  

二、搭建vue项目环境

  1、全局安装vue-cli

  <span class="line">npm install --global vue-cli</span>

  

  2、进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名

    

  说明:

    Vue build ==> 打包方式,回车即可;

    Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

    Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

    Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

    Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

  3、进入项目:cd vue-demo,安装依赖

  

  安装成功后,项目文件夹中会多出一个目录: node_modules

   

  4、npm run dev,启动项目

  项目启动成功:

  

三、vue项目目录讲解

  <br>

  1、build:构建脚本目录

    1)build.js   ==>  生产环境构建脚本;<br>

    2)check-versions.js   ==>  检查npm,node.js版本;

    3)utils.js   ==>  构建相关工具方法;

    4)vue-loader.conf.js   ==>  配置了css加载器以及编译css之后自动添加前缀;

    5)webpack.base.conf.js   ==>  webpack基本配置;

    6)webpack.dev.conf.js   ==>  webpack开发环境配置;

    7)webpack.prod.conf.js   ==>  webpack生产环境配置;

  2、config:项目配置

    1)dev.env.js   ==>  开发环境变量;

    2)index.js   ==>  项目配置文件;

    3)prod.env.js   ==>  生产环境变量;

  3、node_modules:npm 加载的项目依赖模块

  4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

    2)components:组件目录,我们写的组件就放在这个目录里面;

    3)router:前端路由,我们需要配置的路由路径写在index.js里面;

    4)App.vue:根组件;

    5)main.js:入口js文件;

  5、static:静态资源目录,如图片、字体等。不会被webpack构建

  6、index.html:首页入口文件,可以添加一些 meta 信息等

  7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息<br>

  8、README.md:项目的说明文档,markdown 格式

  9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

更多编程相关知识,请访问:编程入门!!

以上是怎么创建vue.js项目的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn