vue项目搭建步骤

vue的使用有3种方式(http://www.runoob.com/vue2/vue-install.html),第一种便是在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

在做项目的情况下,都是用的npm下载:

一、安装环境:

  在https://nodejs.org/en/中下载node运行npm -v 查看版本号(如果有版本号,则表示安装环境成功)。由于 npm 安装速度慢,为了提高效率,可以使用淘宝的镜像:http://npm.taobao.org/

二、搭建vue项目环境

  npm install vue

  全局安装 vue-cli:

  cnpm install --global vue-cli

  vue init webpack 项目名称:

三、安装并运行项目:

  cd (项目名称) 进入项目文件中

  npm install

  npm run dev   运行项目

四、项目目录(初始):

  build:构建脚本目录

    build.js:生产环境构建脚本;

    check-versions.js:检查npm,node.js版本;

    utils.js:构建相关工具方法;

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

    webpack.base.conf.js:webpack基本配置;

    webpack.dev.conf.js: webpack开发环境配置;

    webpack.prod.conf.js:webpack生产环境配置;

  config:项目配置

    dev.env.js:开发环境变量;

    index.js:项目配置文件;

    prod.env.js : 生产环境变量;

    test.env.js :测试环境变量;

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

  src:开发的目录:

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

    components:组件目录;

    router:前端路由;

    App.vue:项目根组件;

    main.js:入口js文件;

  static:静态资源目录(不会被webpack构建)

  index.html:首页入口文件

  test :测试文件目录;

  package.json:npm包配置文件,定义项目的npm脚本,依赖包等信息

  README.md:项目的说明文档

  

猜你喜欢

转载自www.cnblogs.com/wy120/p/10025308.html