• 技术文章 >web前端 >Vue.js

    怎么创建vue.js项目

    青灯夜游青灯夜游2021-01-22 16:37:24原创4809

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

    相关推荐:《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

      npm install --global vue-cli

      

      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项目目录讲解

      

      1、build:构建脚本目录

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

        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脚本,依赖包等信息

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

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

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

    以上就是怎么创建vue.js项目的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue.js
    上一篇:vue-mobile是什么 下一篇:vue使用import()提示语法错误怎么办
    大前端线上培训班

    相关文章推荐

    • vue.js如何打包放到服务器• vue.js能用echarts么• vue.js中如何运行项目• vue.js支持移动端开发吗• 使用vue.js怎么定义全局变量

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网