season0. vue项目初始化及发布

环境搭建

依赖管理

大型项目构建

  1. 下载node.js对其进行版本管理
  2. npm 常规命令:
  • npm安装检测:
npm -v
  • 使用淘宝镜像的命令:
cnpm install npm -g
  • 安装/卸载模块:
# 安装模块
npm install 
# 卸载模块
npm uninstall 
# 更新模块
npm update 
# 搜索模块
npm search 

安装好之后,包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require('') 的方式就好,无需指定第三方包路径。

var express = require('express');
  • 全局安装
npm install express -g   # 全局安装
  1. 创建项目
# 升级或安装 cnpm
npm install cnpm -g

# 最新稳定版
cnpm install vue
# 安装live-server
npm install live-server -g
# 全局安装 vue-cli
cnpm install --global vue-cli

小型项目构建

页面中直接引用:



运行方法

  • live-server使用
    用npm进行全局安装
cd my-project
cnpm install
live-server

vue 项目的创建

# 创建一个基于 webpack 模板的新项目,这里需要进行一些配置,默认回车即可
vue init webpack my-project

vue-cli 项目的发布

npm run build

输入命令后,vue-cli会自动进行项目发布打包。

  • 在执行完npm run build命令后,在你的项目根目录生成了dist文件夹,这个文件夹里边就是我们要传到服务器上的文件,其中的目录包括:
    • index.html主页文件:因为我们开发的是单页web应用,所以说一般只有一个html文件。
    • static 静态资源文件夹:里边js、CSS和一些图片。

vue-cli 项目目录

  • /src/main.js 是整个项目的入口文件,该文件中引入了App.vue文件。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})
  • App.vue文件

    • 标签包裹的内容标签说明使用了路由机制
  • router/index.js 路由文件

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

你可能感兴趣的:(season0. vue项目初始化及发布)